//全局公共颜色
body,
div,
span,
header,
footer,
nav,
section,
aside,
article,
ul,
dl,
dt,
dd,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
i,
b,
textarea,
button,
input,
select,
figure,
figcaption {
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  font-weight: normal;
  font-family: Microsoft YaHei, PingFangSC, Source Han Sans SC;
  box-sizing: border-box;

  &:hover {
    outline: none;
  }
}

input {
  outline: none;
}

html {
  background: #fff;
}

.el-header {
  padding: 0 !important;
  height: auto !important;
}
/* 工作台专用区 */
.app-wrapper-body{
  .el-message-box__wrapper:not(.ct-tech-ui){
    .el-message-box{
      .el-message-box__header{
        .el-message-box__title{
          span{
            font-size: 16px;
            font-weight: 600;
          }
        }
        .el-message-box__headerbtn{
          .el-icon-close{
            font-weight: bold;
          }
        }
      }
      .el-message-box__btns{
        .el-button{
          height: 32px;
          min-width: 60px;
          display: flex;
          align-items: center;
          padding: 0 12px;
          font-size: 14px;
          text-align: center;
          justify-content: center;
          background: rgba(255, 255, 255, 1);
          color: rgba(96, 98, 102, 1);
          &:hover{
            background: rgba(255, 255, 255, 0.6);
            color: rgba(96, 98, 102, 0.6);
            border: 1px solid #DCDFE6;
          }
          &.el-button--primary{
            color: #FFFFFF;
            border: none;
            background: var(--theme, rgba(255, 106, 108, 1));
            &:hover{
              opacity: 0.6;
            }
          }
        }
      }
      .el-message-box__content{
        .el-message-box__status+.el-message-box__message{
          padding-left: 31px;
        }
      }
    }
  }
  .el-date-editor--daterange {
    padding-left: 12px !important;
    .el-range__icon{
      width: 14px;
      margin: 0;
      font-size: 14px;
      &:before{
        font-family: iconfont;
        content: "\EB84" !important;
        color: #909399;
      }
    }
    .el-range-input{
      padding-left: 12px;
      text-align: left;
      color: #606266;
    }
    .el-range-separator{
      width: auto !important;
      color: #606266;
      padding: 0 0 0 12px;
    }
    &.is-active{
      border-color: #A9A9A9 !important;
    }
  }
  .el-select-dropdown{
    ::-webkit-scrollbar{
      width: 0 !important;
      height: 0 !important;
      opacity: 0;
    }
    .el-scrollbar__wrap {
      overflow: auto !important;
      margin-right: 0 !important;
      margin-bottom: 0 !important;
    }
    .el-scrollbar__bar {
      right: 0 !important;
      bottom: 0 !important;
      opacity: 1 !important;
      &.is-horizontal{
        bottom: 0 !important;
      }
      &.is-vertical{
        right: 0 !important;
      }
    }
    .el-select-dropdown__list{
      padding: 0;
    }
    .el-select-dropdown__item{
      height: auto;
      line-height: 32px;
      padding-left: 12px;
      padding-right: 12px;
    }
  }
}

.el-form-item__content {
  line-height: normal;
}
#form .el-input__inner {
  width: 198px;
}

#form .el-input--prefix .el-input__inner {
  width: 85px;
}

#form .el-input__icon {
  display: none;
}

#form .el-form-item {
  margin-bottom: 22px;
  width: 372px;
  float: left;
}

.form {
  width: 100%;
  background: #FFFFFF;
}

.themeStyle .el-message-box__btns .el-button--primary {
  background: var(--themebtnColor) !important;
  border-color: var(--themebtnColor) !important;
}

.themeStyle .el-button--primary:focus,
.themeStyle .el-button--primary:hover {
  color: #fff !important;
  background: var(--themebtnColor) !important;
  border-color: var(--themebtnColor) !important;
}

//下拉列表
.themeStyle .el-select-dropdown__item.selected {
  background: var(--themebtnColor) !important;
  color: #fff !important;
}

//多选下拉列表
.themeStyle .is-multiple .el-select-dropdown__item.selected {
  background-color: #fff !important;
  color: var(--themebtnColor) !important;
}

.themeStyle .is-multiple .el-select-dropdown__item.hover,
.themeStyle .is-multiple .el-select-dropdown__item:hover {
  background-color: #FFF7F7 !important;
}

.el-button.el-button--small {
  height: 32px;
}

.el-button-default-extand{
  background: #fff !important;
  color:var(--theme) !important;
  border-color: var(--theme) !important;
  &:focus,
  &:hover{
    background: var(--theme) !important;
    color: #FFF !important;
  }
  &.is-disabled{
    opacity: 0.4;
  }
}

/* 日期样式 */
.el-date-editor.el-range-editor.el-input__inner {
  padding-left: 7px;

  .el-range-input {
    width: 50%;
  }
}

.el-table--small th {
  padding: 3px 0;
}

.el-form-item__label {
  font-size: 14px;
  font-weight: 600;
  color: #606266;
  line-height: 20px;
}

.el-table--small .el-table__cell {
  padding: 6px 0;
}

/* 日期选择器样式 */
.el-date-editor .el-range-separator {
  padding: 0 5px;
  line-height: 32px;
  width: 10% ;
  font-size: 14px !important;
}

.el-tooltip__popper[x-placement^=top] .popper__arrow {
  transform: translateY(-1px);
}

.t,
.l,
.g,
.l2,
.ty,
.ly,
.ar,
.ar-t,
.ar-g,
.ar-l2{
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb, .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(231, 241, 253, 0.35);
    border: 0;

    &:hover {
      background: rgba(231, 241, 253, 0.5);
    }
  }

  ::-webkit-scrollbar-track {
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
}
.t,.ar-t{
  ::-webkit-scrollbar-thumb, .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background: rgba(79,159,255,0.4);

    &:hover {
      background: rgba(79,159,255,0.55);
    }
  }
}
.g,.ar-g {
  ::-webkit-scrollbar-thumb, .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(121, 107, 61, .76);
    border: 0;

    &:hover {
      background: rgba(121, 107, 61, .86);
    }
  }
}

.l2,.ar-l2{
  ::-webkit-scrollbar-thumb, .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(2, 137, 109, 0.4);
    border: 0;

    &:hover {
      background: rgba(2, 137, 109, 0.6);
    }
  }
}
.l2 {
  .el-icon-search:before{
    content: "\ea6b";
    font-family: 'iconfont';
    font-size: 20px;
    color: #fff;
  }
}
.component-container{
  .el-loading-mask{
    background: none;
    .el-loading-spinner .path{
      stroke: #fff;
    }
  }
}
.c-input,
.c-select,
.c-date-editor {
  width: 100%;
  height: 32px !important;
  line-height: 32px !important;
  background: rgba(79,159,255,0.2) !important;
  border: 0 !important;
  border-radius: 4px !important;
  opacity: 1 !important;
  position: relative;
  &:not(.readonly):not(.disabled):hover:before{
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid rgba(79, 159, 255, 0.6);
    border-radius: inherit;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none;
  }
  &:not(.readonly):not(.disabled):focus-within:before, &.active:before{
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid rgba(79, 159, 255, 1) !important;
    border-radius: inherit;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none;
  }
  &.no-bg {
    background: none !important;
  }
  .el-input__inner,
  .el-range-input {
    height: 100% !important;
    line-height: inherit !important;
    background: none !important;
    border: 0 !important;
    border-radius: inherit !important;
    color: #E8F3FE !important;
    font-size: 14px !important;
    transition: border-color 0s !important;
    padding: 0 12px !important;

    &::placeholder {
      color: rgba(232,243,254,0.7) !important;
    }
  }

  .el-input__icon {
    color: #E8F3FE !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    line-height: inherit !important;
    float: right;
    overflow: hidden;

    &.el-icon-circle-close {
      &:before {
        content: "\ec12";
        font-family: iconfont;
        color: #E8F3FE;
        font-size: 20px;
      }
    }
  }

  .el-input__prefix,
  .el-input__suffix {
    display: flex;
    align-items: center;
    .el-input__prefix-inner,
    .el-input__suffix-inner {
      height: 100%;
      .el-icon-arrow-up:before{
        content: "\EC0C";
        font-family: 'iconfont';
        font-size: 20px;
      }
    }
  }

  .c-suffix {
    margin-right: 6px;
    color: #E8F3FE;
    font-size: 20px;
    display: flex;
    align-items: center;
    i{
      margin-left: 13px;
      font-size: 20px;
      line-height: 1;
      position: relative;
      &:after{
        content: "";
        width: 1px;
        height: 10px;
        background: rgba(232, 243, 254, 0.20);
        position: absolute;
        left: -7px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
      }
      &:first-child {
        margin-left: 0;
        &:after{
          display: none;
        }
      }
    }
    .pointer{
      cursor: pointer;
    }
  }

  .el-input~i,
  .el-select~i {
    font-size: 14px;
    color: #E8F3FE;
    line-height: 1;
    margin: 0 10px;
    position: relative;
    cursor: pointer;

    &:after {
      content: "";
      width: 1px;
      height: calc(1em - 2px);
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(232,243,254,0.2);
      pointer-events: none;
    }
  }
}
.c-date-editor{
  &.el-date-editor{
    .el-range__icon{
      font-size: 20px !important;
      &:before{
        font-family: iconfont;
        content: "\EC18";
      }
    }
  }
  &.el-date-editor--timerange{
    .el-range__icon{
      &:before{
        content: "\EC28";
      }
    }
  }
}

.c-input {
  display: flex !important;
  align-items: center !important;

  .el-input {
    flex: 1 !important;
    height: 100% !important;
    line-height: inherit !important;
    border-radius: inherit !important;
    display: flex;
    align-items: center;
    border: 0 !important;
  }

  &.el-input--prefix,
  .el-input--prefix {
    .el-input__inner {
      padding-left: 32px !important;
    }
  }

  &.el-input--suffix,
  .el-input--suffix {
    .el-input__inner {
      padding-right: 32px !important;
    }
  }
}

.c-select {
  display: flex !important;
  align-items: center !important;

  .el-select {
    flex: 1 !important;
    height: 100% !important;
    line-height: inherit !important;
    border-radius: inherit !important;
    display: flex;
    align-items: center;
    border: 0 !important;
  }

  .el-input {
    border: 0 !important;
  }

  .el-input__inner {
    padding-right: 30px !important;
  }

  .el-select__tags {
    max-width: calc(100% - 25px) !important;
  }
}

.c-select-dropdown.el-select-dropdown {
  background: #0F1926 !important;
  border: none !important;
  border-radius: 4px !important;
  color: #E8F3FE !important;
  backdrop-filter: none !important;
  overflow: hidden;
  margin: 6px 0 !important;
  ::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    opacity: 0;
  }
  .el-scrollbar__wrap {
    overflow: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .el-scrollbar__bar {
    right: 0 !important;
    bottom: 0 !important;
    opacity: 1 !important;
    &.is-horizontal{
      bottom: 0 !important;
    }
    &.is-vertical{
      right: 0 !important;
    }
    .el-scrollbar__thumb{
      background: rgba(79,159,255,0.4);
      &:hover {
        background: rgba(79,159,255,0.55);
      }
    }
  }

  .el-select-dropdown__list {
    padding: 0;
    .el-select-dropdown__item {
      background: none !important;
      color: #E8F3FE !important;
      position: relative;
      padding: 0 12px;
      margin-right: 0;
      height: 32px;
      line-height: 32px;
      text-align: left;

      &.hover {
        background: none !important;
        color: #E8F3FE !important;
      }
      &:hover {
        background: rgba(79,159,255,0.4) !important;
      }
      &.selected{
        background: rgba(79,159,255,0.4) !important;
        color: #4F9FFF !important;
      }
    }
  }

  .popper__arrow {
    display: none;
  }

  &.un-to-body,
  &.un-to-body-dowm,
  &.un-to-body-down{
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: auto !important;
    transform-origin: center top !important;
  }

  &.un-to-body-up {
    position: absolute !important;
    left: 0 !important;
    top: auto !important;
    bottom: 100% !important;
    width: 100% !important;
    min-width: auto !important;
    transform-origin: center bottom !important;
  }
}
.c-date-editor.el-date-editor {
  padding: 0 12px !important;

  .el-range-input {
    padding: 0 !important;

    &:read-only {
      cursor: pointer;
    }
  }

  .el-range-separator {
    color: #E8F3FE !important;
    line-height: inherit !important;
    padding: 0 !important;
    font-size: 14px !important;
    min-width: 1em !important;
    width: 1em !important;
    margin: 0 -2px;
  }

  &.el-date-editor--date,
  &.el-date-editor--time-select,
  &.el-date-editor--time,
  &.el-date-editor--datetime {
    .el-input__prefix {
      left: 10px !important;
    }

    .el-input__suffix {
      right: 6px !important;
    }

    .el-input__inner {
      padding: 0 30px !important;
    }

    .el-input__icon.el-icon-date{
      font-size: 20px !important;
      font-weight: unset;
      &:before {
        font-family: 'iconfont' !important;
        content: '\ec18' !important;
      }
    }
  }
}

.fd-xhjhcjrq-picker.c-date-editor.el-date-editor {

  &.el-date-editor--date,
  &.el-date-editor--time-select,
  &.el-date-editor--time,
  &.el-date-editor--datetime {
    .el-input__prefix {
      left: 3px !important;
    }
  }
}

.c-date-editor-picker.el-picker-panel,
.c-date-editor-picker.el-time-panel {
  color: #E8F3FE;
  background: #0F1926;
  border-radius: 4px;
  box-shadow: none;
  border: 0;
  margin: 6px 0 !important;
  .el-picker-panel__sidebar{
    width: 80px;
    background: none;
    border-right: 1px solid rgba(232,243,254,0.2);
    padding: 0;
    box-sizing: content-box;
    border-radius: 4px;
    overflow: hidden;
    .el-picker-panel__shortcut{
      color: #E8F3FE;
      line-height: 32px;
      &:hover {
        background: rgba(79,159,255,0.4);
      }
    }
  }
  .el-date-range-picker__time-header, .el-date-picker__time-header{
    padding: 12px 9px;
    border-bottom: 1px solid rgba(232,243,254,0.2);
    .el-date-range-picker__time-picker-wrap, .el-date-picker__editor-wrap{
      padding: 0 3px;
      .el-date-range-picker__editor{
        height: 32px;
      }
      .el-input__inner {
        background: rgba(79,159,255,0.2) !important;
        border-radius: 4px !important;
        color: #E8F3FE;
        border: 1px solid transparent !important;
        font-size: 14px;
        padding: 0 11px;
        transition: none;
        &::placeholder {
          color: rgba(232,243,254,0.7);
        }
        &:hover{
          border-color: rgba(79, 159, 255, 0.6) !important;
        }
        &:focus-within{
          border-color: rgba(79, 159, 255, 1) !important;
        }
      }
    }
    .el-icon-arrow-right{
      visibility: hidden;
      width: 20px;
    }
  }
  .el-picker-panel__sidebar+.el-picker-panel__body{
    margin-left: 80px;
  }
  .el-date-range-picker__header, .el-date-picker__header{
    height: 32px;
    line-height: 32px;
    margin: 0;
    border: 0;
    .el-picker-panel__icon-btn{
      color: #E8F3FE !important;
      width: 20px;
      text-align: center;
      line-height: inherit;
      font-size: 20px;
      margin: 0;
      &:hover{
        opacity: 0.6;
      }
      &:hover{
        opacity: 0.8;
      }
      &:before{
        font-family: iconfont;
      }
      &.el-icon-d-arrow-left:before{
        content: "\ebf9";
      }
      &.el-icon-arrow-left:before{
        content: "\ec04";
      }
      &.el-icon-d-arrow-right:before{
        content: "\ebf8";
      }
      &.el-icon-arrow-right:before{
        content: "\ec15";
      }
    }
    div{
      font-size: 14px;
    }
  }
  .el-date-picker__header{
    padding: 0 12px;
    margin-top: 12px;
    .el-date-picker__header-label{
      font-size: 14px;
      color: #E8F3FE !important;
      &:hover{
        opacity: 0.6;
      }
      &:hover{
        opacity: 0.8;
      }
    }
  }
  .el-picker-panel__content{
    padding: 12px;
    margin: 0;
    &.is-left{
      border-right: 1px solid rgba(232,243,254,0.2);
    }
    .el-date-table{
      font-size: 14px;
    }
    .el-date-table th{
      height: 32px;
      padding: 0;
      color: #E8F3FE;
      border-bottom: 1px solid rgba(232,243,254,0.2);
    }
    .el-date-table td{
      height: 32px;
      padding: 0;
      color: #E8F3FE !important;
      div{
        height: inherit;
        span{
          height: calc(100% - 4px);
          width: auto;
          aspect-ratio: 1;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      &.available:hover{
        div{
          span{
            background: rgba(79, 159, 255, 0.4);
          }
        }
      }
      &.prev-month, &.next-month, &.disabled{
        color: rgba(232,243,254,0.4) !important;
        div{
          background: none;
        }
        span{
          color: rgba(232,243,254,0.4) !important;
        }
      }
      &.today{
        span{
          color: #4F9FFF !important;
        }
      }
      &.in-range{
        div{
          background: rgba(79, 159, 255, 0.4);
        }
        &.start-date{
          div{
            border-top-left-radius: 16px;
            border-bottom-left-radius: 16px;
            margin-left: calc(50% - 16px);
            span{
              background: #4F9FFF !important;
              color: #E8F3FE !important;
            }
          }
        }
        &.end-date{
          div{
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
            margin-right: calc(50% - 16px);
            span{
              background: #4F9FFF !important;
              color: #E8F3FE !important;
            }
          }
        }
      }
      &.current {
        div{
          span {
            background: #4F9FFF !important;
            color: #E8F3FE !important;
          }
        }
      }
    }
    .el-year-table, .el-month-table{
      td{
        padding: 12px 0 0 0;
        div{
          height: auto;
          padding: 0;
        }
        .cell{
          width: 52px;
          height: 28px;
          line-height: 28px;
          color: #E8F3FE !important;
          border-radius: 14px;
        }
        &.today{
          .cell{
            color: #4F9FFF !important;
            font-weight: normal;
          }
        }
        &:not(.disabled):hover{
          .cell{
            background: rgba(79, 159, 255, 0.4);
          }
        }
        &.disabled{
          .cell{
            color: rgba(232,243,254,0.4) !important;
            background: none !important;
          }
        }
        &.current{
          .cell{
            background: #4F9FFF !important;
            color: #E8F3FE !important;
          }
        }
      }
    }
  }
  .el-time-panel{
    color: #E8F3FE;
    background: #0F1926;
    margin: 6px 0;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
  }
  .el-time-range-picker__content{
    padding: 0 12px 12px;
    display: flex;
    justify-content: space-between;
    .el-time-range-picker__cell{
      width: calc(50% - 6px);
      padding: 0;
      .el-time-range-picker__header{
        height: 32px;
        line-height: 32px;
        margin: 0;
      }
    }
  }
  .el-time-spinner{
    .el-time-spinner__wrapper{
      border-left: 1px solid rgba(232,243,254,0.2);
      &:first-child{
        border: 0;
      }
    }
  }
  .el-time-range-picker__body{
    border-radius: 4px;
    border: 1px solid rgba(232,243,254,0.2);
  }
  .el-time-panel__content{
    &:before{
      border-top: 1px solid rgba(232,243,254,0.2);
      border-bottom: 1px solid rgba(232,243,254,0.2);
    }
    &:after{
      border: 0;
    }
    .el-time-spinner__item{
      color: #E8F3FE;
      &:not(.disabled):not(.active):hover{
        background: rgba(79, 159, 255, 0.4);
      }
      &.active{
        color: #4F9FFF;
        font-weight: normal;
      }
    }
  }
  .el-picker-panel__footer, .el-time-panel__footer{
    background: none;
    padding: 12px;
    border-top: 1px solid rgba(232,243,254,0.2);
    height: auto;
    overflow: hidden;
    .el-button, .el-time-panel__btn{
      width: 48px;
      height: 24px;
      line-height: 24px;
      background: rgba(79,159,255,0.2);
      border-radius: 4px;
      border: 0;
      color: #E8F3FE !important;
      padding: 0;
      margin: 0 0 0 12px;
      float: right;
      position: relative;
      font-family: Microsoft YaHei, PingFangSC !important;
      font-weight: normal;
      transition:none;
      &.is-plain, &.confirm{
        background: linear-gradient( 90deg, #4F9FFF 0%, #1373E6 100%);
      }
      &:hover{
        opacity: 0.6;
      }
      &:active{
        opacity: 0.8;
      }
    }
  }
  .popper__arrow {
    display: none !important;
  }
  &.el-date-picker{
    .el-picker-panel__content{
      width: 100%;
      padding-top: 0 !important;
    }
  }

  ::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    opacity: 0;
  }
  .el-scrollbar__wrap {
    overflow: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .el-scrollbar__bar {
    right: 0 !important;
    bottom: 0 !important;
    &.is-horizontal{
      bottom: 0 !important;
    }
    &.is-vertical{
      right: 0 !important;
    }
    .el-scrollbar__thumb{
      background: rgba(79,159,255,0.4);
      &:hover {
        background: rgba(79,159,255,0.55);
      }
    }
  }
}
.c-no-datas-block{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #E8F3FE;
  font-style: normal;
  font-weight: normal;
  margin: 0 auto;
  overflow: hidden;
  padding: 12px;
  &:before {
    content: "";
    display: block;
    width: 68px;
    height: 68px;
    background: url("~@/assets/image/noData.png") no-repeat center / 100% 100%;
    margin-bottom: 12px;
  }
}
.c-no-datas{
  @extend .c-no-datas-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.c-popup {
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1099 !important;
  pointer-events: none !important;
  display: flex !important;
  background: none !important;
  backdrop-filter: none !important;

  .popup-body {
    pointer-events: auto;
    margin: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 90%;
    max-height: 90%;

    &:after {
      content: "";
      width: 100%;
      height: 100%;
      background: rgba(23,37,55,0.9);
      border-radius: 8px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }

    .popup-header {
      line-height: 48px;
      text-align: center;
      font-size: 16px;
      color: #E8F3FE;
      background: linear-gradient(180deg, rgba(132,180,250,0.7) 0%, rgba(132,180,250,0.24) 100%);
      border-radius: 8px 8px 0 0;
      position: relative;

      span {
        font-weight: 600;
      }
    }
    .popup-header-tab{
      width: 100%;
      height: 48px;
      line-height: 48px;
      text-align: center;
      .popup-header-img {
        font-size: 14px;
        color: #E8F1FD;
        line-height: 48px;
        opacity: 1;
      }
      span {
        font-size: 16px;
        color: #E8F1FD;
        line-height: 48px;
        opacity: 1;
      }
      .content-header-box {
        width: 100%;
        height: 48px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        position: relative;
        &:after {
          content: "";
          width: 100%;
          height: 2px;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          background: url("~@/assets/image/tags-btm-line.png") no-repeat bottom center;
        }
        /*tab页签 选中*/
        .chooseTab {
          width: 150px;
          height: 100%;
          color: rgba(232, 241, 253, 1);
          font-size: 14px;
          line-height: 32px;
          text-align: center;
          position: relative;
          &:after{
            content: "";
            width: 98px;
            height: 10px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: url("~@/assets/image/tag-btm-guang.png") no-repeat bottom center;
            pointer-events: none;
          }
        }
        /*tab页签 未选中*/
        .defaultTab {
          width: 150px;
          height: 100%;
          color: rgba(232, 241, 253, 0.7);
          font-size: 14px;
          line-height: 32px;
          text-align: center;
        }
      }
    }

    .popup-content {
      flex: 1;
      overflow: auto;
      background-color: rgba(23,37,55,0.9);
      border-radius: 0 0 8px 8px;
    }

    .popup-close {
      width: 38px;
      height: 38px;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 12;
      background: url("~@/assets/image/video/close.png") no-repeat center / 100% 100%;
      transform: translate(50%, -50%);
      cursor: pointer;
    }
  }

  &[mask]:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.7);
  }

  &[mask='0']:after {
    background: rgba(0, 0, 0, 0);
  }
}
.c-popup.fd-labelDetail-pop{
  z-index: 4000 !important;
}

.v-modal {
  background: none !important;
  opacity: 1 !important;
  animation: none !important;
  backdrop-filter: none !important;

  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background: rgba(0, 0, 0, 0.7);
  }
}

.c-button {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  text-align: center;
  padding: 0 12px;
  border-radius: 4px;
  background: rgba(79,159,255,0.2);
  color: #E8F3FE;
  font-size: 14px;
  cursor: pointer;
  font-weight: normal;
  font-style: normal;

  &[submit],
  &.submit,
  &.on {
    background: linear-gradient(90deg, #4F9FFF 0%, #1373E6 100%);
  }
  &:hover {
    opacity: 0.6;
  }
  &:active {
    opacity: 0.8;
  }
  &[disabled],
  &.disabled {
    text-shadow: none;
    cursor: not-allowed;
    opacity: 0.4;
  }
}

.c-confirm {
  background: none !important;
  border-radius: 8px !important;
  border: 0 !important;
  width: auto !important;
  min-width: 320px;
  max-width: 368px;
  box-shadow: none !important;
  position: relative;
  z-index: 2;
  overflow: visible !important;
  cursor: default;
  padding: 0 !important;
  min-width: 368px;
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background: rgba(23, 37, 55, 0.90);
    border-radius: inherit;
  }

  .el-message-box__header {
    padding: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(180deg, rgba(132, 180, 250, 0.7) 0%, rgba(132, 180, 250, 0.24) 100%);
    border-radius: 8px 8px 0px 0px;
    &:before{
      content: "";
      width: 116px;
      height: 100%;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
    }
    &:after{
      content: "";
      width: 100%;
      height: 1px;
      position: absolute;
      left: 0;
      bottom: 0;
      pointer-events: none;
    }

    .el-message-box__title {
      font-size: 16px;
      color: #E8F3FE;
      text-align: center;
      font-weight: 500;
    }

    .el-message-box__headerbtn {
      width: 38px;
      height: 38px;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 12;
      background: url("~@/assets/image/video/close.png") no-repeat center / 100% 100%;
      transform: translate(50%, -50%);
      cursor: pointer;
      .el-icon-close {
        display: none;
      }
    }
  }

  .el-message-box__content {
    padding: 24px 26px;

    .el-message-box__message {
      color: #E8F3FE;
      font-size: 14px;
      text-align: center;
      p{
        line-height: 20px;
      }
    }
  }

  .el-message-box__btns {
    padding: 0 12px 12px !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: center !important;

    .el-button {
      width: 108px;
      height: 32px;
      line-height: 32px;
      background: rgba(79,159,255,0.2);
      border-radius: 4px;
      border: 0;
      padding: 0;
      color: #E8F3FE;
      font-size: 14px;
      margin: 0 0 0 12px !important;
      position: relative;

      &:last-child {
        margin-left: 0 !important;
      }

      &.el-button--primary {
        background: linear-gradient( 90deg, #4F9FFF 0%, #1373E6 100%);
      }
      &:hover{
        opacity: 0.6;
      }
      &:active{
        opacity: 0.8;
      }
    }
  }
}

.ar-tc-ooltip.el-tooltip__popper.is-dark {
  background: transparent;
  padding: 0;
}

.el-tooltip__popper.ar-tc-ooltip .popper__arrow {
  display: none;
}

.c-tooltip, .c-tooltip-2 {
  background: rgba(23, 37, 55, 0.8) !important;
  border-radius: 4px !important;
  color: #E8F3FE !important;
  z-index: 2050 !important;
  padding: 7px 8px !important;
  line-height: normal;
  pointer-events: none;
  font-size: 14px;
  .popper__arrow,
  .popper__arrow:after {
    display: none !important;
  }
  &.el-tooltip__popper[x-placement^="top"] {
    margin-bottom: 4px !important;
  }
  &.el-tooltip__popper[x-placement^="right"] {
    margin-left: 4px !important;
  }
  &.el-tooltip__popper[x-placement^="bottom"] {
    margin-top: 4px !important;
  }
  &.el-tooltip__popper[x-placement^="left"] {
    margin-right: 4px !important;
  }
}
.c-tooltip-2{
  background: #0F1926 !important;
  .popper__arrow,
  .popper__arrow:after {
    display: unset !important;
  }
  &.el-tooltip__popper[x-placement^="top"] {
    margin-bottom: 8px !important;

    .popper__arrow,
    .popper__arrow:after {
      border-top-color: #0F1926 !important;
    }
  }
  &.el-tooltip__popper[x-placement^="right"] {
    margin-left: 8px !important;

    .popper__arrow,
    .popper__arrow:after {
      border-left-color: #0F1926 !important;
    }
  }
  &.el-tooltip__popper[x-placement^="bottom"] {
    margin-top: 8px !important;
    .popper__arrow,
    .popper__arrow:after {
      border-bottom-color: #0F1926 !important;
    }
  }
  &.el-tooltip__popper[x-placement^="left"] {
    margin-right: 8px !important;
    .popper__arrow,
    .popper__arrow:after {
      border-right-color: #0F1926 !important;
    }
  }
}

.c-tip {
  display: none;
  font-style: normal;
  font-weight: normal;
  background: rgba(23, 37, 55, 0.8);
  border-radius: 4px;
  color: #E8F3FE;
  z-index: 99999 !important;
  padding: 6px 12px;
  pointer-events: none;
  position: fixed !important;
  top: 0;
  left: 0;
  max-width: 600px;
  font-size: 14px;
  word-break: break-all;
  line-height: 20px;
  &.keep-all{
    word-break: keep-all;
    white-space: nowrap;
  }
  &.transparent {
    opacity: 0 !important;
  }
}

/* 新消息提醒 */
.message-new {
  border: 0 !important;
  padding: 9px 12px 9px 32px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  z-index: 9999 !important;
  &:after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    border: 1px solid;
  }
  .el-message__icon{
    display: block;
    font-size: 14px;
    padding-top: inherit;
    position: absolute;
    left: 12px;
    top: 0;
    margin: 0;
    transform: none;
  }
  .el-icon-close{
    display: block;
    font-size: 14px;
    padding-top: inherit;
    position: absolute;
    right: 12px;
    top: 0;
    margin: 0;
    transform: none;
    color: #909399;
    &:hover{
      opacity: 0.6;
    }
    &:active{
      opacity: 0.8;
    }
  }
  .el-message__content{
    flex: 1 !important;
    padding-right: 0 !important;
    color: #606266 !important;
  }
  .more-til{
    display: none;
    position: absolute;
    right: 12px;
    color: #1890FF;
    cursor: pointer;
    &:hover{
      opacity: 0.6;
    }
    &:active{
      opacity: 0.8;
    }
  }
  .more-detail{
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    color: #8C8C8C;
    line-height: 1;
    position: relative;
    .more-left{
      padding-right: 30px;
    }
    .more-right{
      flex: 1;
      text-align: right;
    }
  }
  &.is-closable{
    .el-message__content{
      padding-right: 20px !important;
    }
  }
  &.message-more-new{
    .el-icon-close{
      display: none;
    }
    .el-message__content{
      padding-right: calc(4em + 12px) !important;
    }
    .more-til{
      display: inline;
    }
    .more-detail{
      display: none;
    }
  }
  &.message-more-new-open{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  &.message-success-new{
    background: #F6FFED !important;
    &:after{
      border-color: #B7EB8F;
    }
    .el-message__icon{
      color: #52C41A;
    }
  }
  &.message-warning-new{
    background: #E6F7FF !important;
    &:after{
      border-color: #91D5FF;
    }
    .el-message__icon{
      color: #1890FF;
      &:before{
        content: "\e7a1";
      }
    }
  }
  &.message-error-new{
    background: #FFFBE6 !important;
    &:after{
      border-color: #FFE58F;
    }
    .el-message__icon{
      color: #FFA940;
      &:before{
        content: "\e7a3";
      }
    }
  }
}
.t, .ar-t, .g, .ar-g, .l2, .ar-l2{
  .message-new {
    &:after{
      display: none;
    }
    .more-detail{
      font-size: 12px;
    }
    &.message-success-new{
      .el-message__icon{
        color: #13BE88;
      }
    }
    &.message-warning-new{
      .el-message__icon{
        color: #4F9FFF !important;
      }
    }
    // &.message-warning-new{
    //   .el-message__icon{
    //     color: #FB913C !important;
    //   }
    // }
    &.message-error-new{
      .el-message__icon{
        color: #FB913C !important;
      }
    }
  }
}
.t, .ar-t{
  .message-new {
    background: #172537 !important;
    .el-icon-close, .el-message__content, .more-til, .more-detail{
      color: #E8F3FE !important;
    }
  }
}
.g, .ar-g{
  .message-new {
    background: rgba(22, 18, 9, 0.95) !important;
    .el-icon-close, .el-message__content, .more-til, .more-detail{
      color: #E4E7C1 !important;
    }
  }
}
.l2, .ar-l2{
  .message-new {
    background: #00221B !important;
    .el-icon-close, .el-message__content, .more-til, .more-detail{
      color: #fff !important;
    }
  }
}


.table-tip.is-dark {
  background: #3C4F64 !important;
  color: #E8F3FE !important;

  .popper__arrow,
  .popper__arrow:after {
    border-top-color: #3C4F64 !important;
  }
}


.easy-player{
  .vjs-control-bar{
    background: rgba(0,0,0,0.7) !important;
  }
  .vjs-progress-control{
    .vjs-progress-holder{
      height: 6px;
      background: rgba(255,255,255,0.2);
      .vjs-load-progress{
        display: none;
      }
      .vjs-play-progress{
        background: #fff;
        &:before{
          content: "";
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: inherit;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(50%, -50%);
          transition: all 0.2s;
        }
      }
    }
  }
  &:hover{
    .vjs-progress-control{
      .vjs-progress-holder{
        .vjs-play-progress{
          &:before{
            width: 12px;
            height: 12px;
          }
        }
      }
    }
  }
  .vjs-big-play-button{
    background: none !important;
    .vjs-icon-placeholder{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(0,0,0,0.7);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      &:before{
        content: "\ecb1" !important;
        font-family: iconfont !important;
        line-height: 1;
        font-size: 14px;
        position: static !important;
        width: auto !important;
        height: auto !important;
      }
    }
  }
  .easy-player-loading {
    display: block !important;
    width: 30% !important;
    max-width: 188px !important;
    height: auto;
    aspect-ratio: 1 !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;

    .logo,
    .loading-text {
      display: none !important;
    }

    &:before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: url("~@/assets/image/loading-logo.svg") no-repeat center center;
      background-size: 50% 50%;
    }

    &:after {
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 5%;
      top: 7%;
      background: url("~@/assets/image/loading-circle.svg") no-repeat center center;
      background-size: 90% 90%;
      animation: playerLoading 1.5s infinite linear;
      transform: rotate(0deg);
      transform-origin: 45% 45%;
    }
  }

  @keyframes playerLoading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .vjs-error{
    .vjs-big-play-button, .easy-player-loading{
      display: none !important;
    }
  }
}
.jn-cpkgl-tab{
  .el-tabs__item{
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    padding: 0 12px;
  }
  .el-tabs__nav-wrap::after{
    height: 1px;
    background: #EBEEF5;
  }
  .el-tabs__item.is-active{
    font-weight: bold;
  }
  .el-tabs__nav{
    margin-left: 12px;
  }
  .el-tab-pane>div{
    height: 220px;
    position: relative;
  }
  .fd-upload-but{
    text-align: center;
    position: absolute;
    bottom: 6px;
    width: 100%;
    .el-button.el-button--small{
      width: 88px;
      font-size: 14px;
      line-height: 11px;
    }
  }
}
.jn-carbrand-box.f-container{
  .f-search .f-from .el-row .el-col .el-form-item{
    .el-form-item__label{
      font-size: 14px;
      font-weight: normal;
      color: #606266;
    }
    .el-form-item__content{
      padding: 0 12px;
      padding-right: 0;
    }
    .el-input--small .el-input__inner{
      color: #909399;
      padding-left: 12px;
    }
    .el-date-editor .el-range-separator{
      color: #606266;
      line-height: 32px !important;
    }
    .el-date-editor .el-range__icon::before{
      top: 1px;
      position: absolute;
      left: 12px;
    }
  }
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 12px;
  }
  .el-table--small .el-table__cell{
    padding: 4px 0;
  }
  .f-buttons .el-col {
    .el-button.is-disabled{
      opacity: 0.4 !important;
    }
  }
  .f-table .el-table .el-table__fixed-header-wrapper .el-table__header .el-table__cell .cell, .f-table .el-table .el-table__header-wrapper .el-table__header .el-table__cell .cell{
    font-weight: bold;
  }
}
.f-table{
  .el-button.is-disabled{
    opacity: 0.4 !important;
  }
}
.f-dialog.jn-clk-dialog.jn-clk-detaildialog{
  max-width: 398px;
  min-width: auto;
  .el-dialog__body{
    padding: 5px 12px !important;
    .el-form .el-row .el-col .el-form-item{
      margin-bottom: 0 !important;
      .el-form-item__content{
        line-height: 32px;
       >span{
         font-size: 14px;
         color: #606266
       }
     }
     .el-form-item__label{
       color: #909399;
     }
   }
  }

}
.f-dialog.jn-clk-dialog{
  .el-dialog__header{
    .el-dialog__title{
      color: #303133;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .el-dialog__body{
    padding: 12px !important;
    .jn-cpkgl-tab{
      height: 285px;
    }
    .el-form{
        .el-row .el-col .el-form-item .el-form-item__label{
          font-weight: normal;
          color: #606266;
        }
        .el-button.el-button--small{
          height: 32px;
          font-size: 14px;
          // color: #606266;
          padding: 0 10px;
          width: 72px;
          // border: solid 1px #DCDFE6;
        }
        .el-button.el-button--small.fd-loadFile{
          width: 106px;
          &:hover{
            background: #FFF;
            border: 1px solid #DCDFE6;
            color: #606266;
            opacity: 0.6;
          }
        }
        .el-button--primary.is-plain.fd-checkFile{
          background: var(--theme, #FF6A6C);
          border-color: var(--theme, #FF6A6C);
          color: #ffffff;
          width: 106px;
        }
        .el-button--primary.fd-loadFile{
          width: 106px;
        }
        .el-button.el-button--small:hover{
          opacity: 0.6;
        }
        .el-button.el-button--small.new-primary{
          color: #fff;
          margin-left: 30%;
          margin-top: 85px;
        }
        .el-upload.el-upload--text+.el-upload__tip{
          color: #909399;
          margin-left: 12px;
          font-size: 14px;
        }

      .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
        background: #F5F7FA;
        border-top:  1px solid #EBEEF5;
      }
      .el-table th.el-table__cell>.cell{
        font-weight: bold;
        color: #515A6E;
      }
      .el-progress.is-success .el-progress-bar__inner{
        background-color:#13CE66
      }
      .el-row .el-col .el-input .el-input__inner:focus{
        border-color: #A9A9A9;
      }
    }
  }
  .el-dialog__footer{
    padding: 12px;
  }
}
.f-dialog.jn-clk-dialog .el-dialog__body .fd-importUpload-wapper .el-form .el-row .el-col .el-form-item .el-form-item__content .el-form-item__error{
      position: absolute;
      top: 34px;
}
.fd-sxtime-picker.el-popper{
   border: none;
  .popper__arrow{
    border-bottom-color:transparent
  }
}
.fd-sxtime-picker{
  .el-time-spinner__wrapper{
    .el-time-spinner__item{
      font-size: 14px;
    }
  }
  .el-time-range-picker__content{
    padding: 2px 6px;
  }
  .el-time-panel__footer{
    padding: 12px;
    line-height: 50px;
    padding-right: 7px;
    height: 50px;
  }
  .el-time-range-picker__cell{
    padding: 0px 6px 0 6px;
  }
  .el-time-spinner__item.active:not(.disabled){
    color: var(--theme, #FF6A6C);
  }
  .el-time-panel__btn.confirm{
    background: var(--theme, #FF6A6C);
    border-radius: 4px;
    color: #fff;
    padding: 0 11px;
    font-weight: normal;
    line-height: 24px;
    float: right;
    border: var(--theme, #FF6A6C) solid 1px;
    &:hover{
      opacity: 0.6;
    }
  }
  .el-time-panel__btn.cancel{
    color: #606266;
    border: 1px solid #DCDFE6;
    background: #fff;
    padding: 0 11px;
    font-weight: normal;
    border-radius: 4px;
    line-height: 24px;
    float: right;
    margin-left: 0px;
    &:hover{
      opacity: 0.6;
    }
  }
}
.f-dialog.jn-clk-dialog.fd-cllxpz-dialog{
  .el-dialog__body{
    .f-table.fd-cllxgl-table{
      margin-top: 0;
      height: 535px;
      .el-table .el-table__header-wrapper .el-table__header .el-table__cell .cell{
        font-weight: bold;
      }
      .el-input--small{
        font-size: 14px;
      }
      .el-table__body td.el-table__cell{
        padding: 6px 0;
      }
    }

  }
}
.fd-table-upload .el-table{
  .el-table__header{
    .el-table__cell{
      padding: 0;
      height: 40px;
      .cell{
        font-size: 14px;
        font-weight: bold;
        color: #606266;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .el-progress-bar__innerText{
    margin-top: -5px;
    font-size: 10px;
  }
  .cell.el-tooltip{
      font-size: 14px;
  }
  .el-table__body td.el-table__cell{
    padding: 6px 0;
  }
}
.jn-clk-dialog .el-upload-list--picture-card .el-upload-list__item{
  width: 78px;
  height: 78px;
}
.jn-clk-dialog .el-upload--picture-card{
    width: 78px;
    height: 78px;
}
.jn-clk-dialog.fd-cllxpz-dialog .el-table__fixed-body-wrapper{
  top: 40px !important;
}
//录像回放查询结果弹窗
.c-popup.fd-c-popup-n{
  .popup-body{
    background: rgba(23,37,55,0.9);
    border-radius: 8px;
    .popup-header{
      height: 48px;
      background: none;
      position: relative;
      &:after{
          content: '';
          height: 1px;
          width: 100%;
          position: absolute;
          bottom: 0;
          opacity: 0.35;
          left: 0;
          background: linear-gradient(90deg, rgba(176,212,255,0), #b0d4ff, rgba(176,212,255,0));
      }
      &:before{
        content: '';
        height: 17px;
        width: 100%;
        position: absolute;
        bottom: 0px;
        left: 0;
        background:url(../image/ar/tab-select.png) center no-repeat;
      }
    }
  }
}

.fd-cllxpz-dialog{
  .el-input__inner{
    border: 1px solid #DCDFE6;
  }
  .el-input__inner::placeholder{
    color: #909399;
  }
}
.f-dialog.jn-clk-dialog .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
  margin-right: 1px;
}
.fd-cpk-fileProgess{
  margin: 0 6px;
}
// ar大屏配置
.fd-arsetting-search{
  .el-form.fd-arsetting-form{
    padding-top: 12px;
    padding-right: 12px;
    .el-form-item {
      .el-form-item__label{
        font-size: 14px;
        color: #E8F3FE;
        padding-right: 12px;
        font-weight: normal;
      }
      .el-form-item__content{
        padding: 0;
        font-size: 14px;
        .el-form-item__error{
          background: rgba(237, 81, 88, 0.2);
          border-radius: 4px;
          width: 100%;
          height: 32px;
          line-height: 27px;
          margin-left: 0;
          padding-left: 36px;
          color: #ED5158;
          font-size: 14px;
          &:before{
            content:'\ed70';
            font-family:'iconfont';
            font-size: 18px;
            left: 12px;
            position: absolute;
            top: 3px;
          }
        }
      }
    }
    .el-form-item--small.el-form-item{
      margin-bottom: 6px;
    }
    #upload_img .uploadicon{
      color: #fff !important;
    }
    .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before{
      margin-right: 2px;
    }
    .el-form-item.fujian-required.is-required:not(.is-no-asterisk)>.el-form-item__label:before, .el-form-item.fujian-required.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before{
      display: none;
    }
    .el-input__icon.el-input__validateIcon.el-icon-circle-check,.el-input__icon.el-input__validateIcon.el-icon-circle-close{
      display: none !important;
    }

  }
  .el-form.fd-arsetting-form.fd-arsettingSearch-form{
    .el-form-item {
      .el-form-item__content{
        margin-bottom: 6px;
      }
    }
  }
  .el-form.fd-arsetting-form.fd-detail-form{
    .el-form-item {
      .el-form-item__label{
        opacity: 0.7;
      }
    }
  }
  .el-form.fd-arsetting-form.fd-arsettingAdd-form{
    .el-form-item {
      .el-form-item__content{
        .el-input.el-input--small{
          margin-bottom: 6px;
        }
      }
    }
  }
  .c-button.fd-add-button{
      width: 108px;
      height: 32px;
      background: rgba(79, 159, 255, 0.2);
      border-radius: 4px;
      border: none;
      font-size: 14px;
      color: #E8F3FE;
  }
  .c-button.fd-reseat-button{
    width: 108px;
    height: 32px;
    background: rgba(79, 159, 255, 0.2);
    border-radius: 4px;
    border: none;
    font-size: 14px;
    color: #E8F3FE;
    margin-left: 7px;
  }
  .c-button.fd-search-button{
    width: 108px;
    height: 32px;
    background: linear-gradient( 90deg, #4F9FFF 0%, #1373E6 100%);
    border-radius: 4px;
    border: none;
    font-size: 14px;
    color: #E8F3FE;
  }
  .el-button.fd-text-btn{
    background: none;
    border: none;
    font-size: 14px;
    color: #E8F3FE;
    width: 50px;
    padding: 0;
    text-align: left;
    margin-left: 12px;
    .el-icon-arrow-down{
      float: right;
      margin-right: 2px;
    }
    .el-icon-arrow-up{
      float: right;
      margin-left: 2px;
    }
    >span{
      margin: 0;
      display: block;
      margin-top: 3px;
    }
  }
}
.el-table.table-box{
  background: transparent;
  tr{
    background: transparent;
  }
  .el-table__row .el-button--text{
    font-size: 14px;
  }
  &::before{
    height: 0;
  }
  .text-color{
    color: #4F9FFF;
    cursor: pointer;
  }
  .fd-table-text-but{
    height: 25px;
  }
}
.ar-l2 .fd-table-box .el-table.table-box .el-table__row .fd-table-text-but.el-button--text{
  color: #F9FF6C !important;
}
.ar-g .fd-table-box .el-table.table-box .el-table__row .fd-table-text-but.el-button--text{
  color: #FFFA28 !important;
}
.fd-table-box .el-table .caret-wrapper{
  height: 24px;
  .sort-caret.ascending{
    top:2px;
    border: solid 4px transparent;
    border-bottom-color: #E8F3FE;
  }
  .sort-caret.descending{
    bottom: 3px;
    border: solid 4px transparent;
    border-top-color: #E8F3FE;
  }

}
.fd-table-box .el-table{
  .descending .sort-caret.descending{
    border-top-color: #4F9FFF !important;
  }
  .ascending .sort-caret.ascending{
    border-bottom-color: #4F9FFF !important;
  }
  .el-switch__core{
    height: 16px;
    width: 32px !important;
    &:after{
      width: 12px;
      height: 12px;
    }
  }
  .el-switch.is-checked .el-switch__core::after{
    margin-left: -13px;
  }
}
// .el-tooltip__popper.is-dark.ar-g{
//   background: #161209;
//   color: #E4E7C1;
// }
/* 国土定制 */
.g, .ar-g, .banner-gt {
  .easy-player .easy-player-loading {
    &:before {
      left: -10000px;
      filter: drop-shadow(#cdcdcd 10000px 0);
    }

    &:after {
      left: calc(-10000px + 5%);
      filter: drop-shadow(#E4E7C1 10000px 0);
      transform-origin: calc(10000px + 45%) 45%;
    }
  }
  .c-input,
  .c-select,
  .c-date-editor {
    background: rgba(100, 86, 46, 0.4) !important;
    &:not(.readonly):not(.disabled):hover:before{
      border: 1px solid rgba(255, 238, 177, 0.6);
    }
    &:not(.readonly):not(.disabled):focus-within:before, &.active:before{
      border:  1px solid rgba(255, 238, 177, 1) !important;
    }
    .el-input__inner,
    .el-range-input {
      color: #E4E7C1 !important;

      &::placeholder {
        color: rgba(228, 231, 193, 0.7) !important;
      }
    }

    .el-input__icon {
      color: #FFEEB1 !important;
      overflow: hidden;

      &.el-icon-circle-close {
        &:before {
          color: #FFEEB1;
        }
      }
    }
    .c-suffix {
      color: #FFEEB1;
      i{
        &:after{
          background: rgba(228, 231, 193, 0.2);
        }
      }
    }

    .el-input~i,
    .el-select~i {
      color: #FFEEB1;

      &:after {
        background: rgba(228, 231, 193, 0.2);
      }
    }
  }

  .c-select-dropdown.el-select-dropdown {
    background: linear-gradient(180deg, rgba(163, 144, 69, 0.53) 0%, rgba(105, 95, 42, 0.18) 35px, rgba(98, 88, 38, 0) 100px) rgba(0, 0, 0, 0.7) !important;
    border: 1px solid #6E674E !important;
    color: #E4E7C1 !important;

    .el-select-dropdown__list {
      .el-select-dropdown__item {
        color: #E4E7C1 !important;
        &.hover {
          color: #E4E7C1 !important;
        }

        &.selected,
        &:hover {
          background: rgba(122, 113, 61, 0.36) !important;
        }
        &.selected{
          color: #FFFA28 !important;
        }
      }
    }

    .el-select-dropdown__empty {
      color: #E4E7C1;
    }
    .el-scrollbar__thumb{
      background-color: rgba(100, 86, 46, 0.4);
      &:hover {
        background-color: rgba(100, 86, 46, 0.55);
      }
    }
  }

  .c-popup {
    .popup-body {
      border-radius: 8px;
      padding: 1px;
      background: none;
      &:after {
        background: linear-gradient(180deg, rgba(163, 144, 69, 0.53) 0%, rgba(105, 95, 42, 0.18) 10%, rgba(98, 88, 38, 0) 13%) rgba(0, 0, 0, 0.7) !important;;
        border: 1px solid rgba(110, 103, 78, 0.9);
        border-radius: inherit;
      }

      .popup-header {
        color: #FFFFFF;
        text-shadow: 1px 0px 4px #DCD277;
        font-weight: bold;
        background: none;

        &:before {
          content: "";
          width: 100%;
          height: 100%;
          opacity: 0.96;
          background: url("~@/assets/image/singleTabSel.png") no-repeat bottom center;
          pointer-events: none;
          position: absolute;
          left: 0;
          bottom: 0;
        }

        &:after {
          content: "";
          width: 100%;
          height: 1px;
          opacity: 0.35;
          background: linear-gradient(90deg, rgba(255, 222, 76, 0), rgba(255, 222, 76, 1), rgba(255, 222, 76, 0));
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          pointer-events: none;
        }
      }
      .popup-header-tab{
        .popup-header-img {
          color: #E4E7C1;
        }
        span {
          color: #E4E7C1;
        }
        .content-header-box {
          &:after {
            content: "";
            width: 100%;
            height: 1px;
            opacity: 0.35;
            background: linear-gradient(90deg, rgba(255, 222, 76, 0), rgba(255, 222, 76, 1), rgba(255, 222, 76, 0));
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            pointer-events: none;
          }
          /*tab页签 选中*/
          .chooseTab {
            span{
              color: #FFFFFF;
            }
            &:after{
              content: "";
              width: 98px;
              height: 10px;
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              background: url("~@/assets/image/singleTabSel.png") no-repeat bottom center;
              pointer-events: none;
            }
          }
          /*tab页签 未选中*/
          .defaultTab {
            width: 150px;
            height: 100%;
            color: rgba(232, 241, 253, 0.7);
            font-size: 14px;
            line-height: 32px;
            text-align: center;
          }
        }
      }
      .popup-content {
        background: none;
      }
      .popup-close {
        background: url("~@/assets/image/video_gt/gt-close.png") no-repeat center / 100% 100%;
      }
    }
  }

  .c-button {
    background: rgba(100, 86, 46, 0.71);
    color: #E4E7C1;
    position: relative;
    border: 0.5px solid rgba(100, 86, 46, 1);
    line-height: 30px;

    &[submit],
    &.submit,
    &.on {
      border: 0;
      line-height: 32px;
      text-shadow: 0px 2px 7px rgba(255,225,44,0.5);
      background: radial-gradient(circle at 50% -250%, rgba(255, 219, 117, 0.81) 0%, rgba(0, 0, 0, 0) 89%), linear-gradient(180deg, rgba(255, 224, 72, 0.34) 0%, rgba(255, 241, 126, 0.1) 100%);
      &:after{
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        background: url("~@/assets/image/video_gt/btn_l_t.png") no-repeat left top, url("~@/assets/image/video_gt/btn_l_b.png") no-repeat left bottom, url("~@/assets/image/video_gt/btn_r_t.png") no-repeat right top, url("~@/assets/image/video_gt/btn_r_b.png") no-repeat right bottom;
      }
    }
  }

  .c-no-datas-block {
    color: #E4E7C1;
    &:before {
      background-image: url("~@/assets/image/noData-gt.png");
    }
  }

  .c-date-editor.el-date-editor {
    .el-range-separator {
      color: #E4E7C1 !important;
    }
  }

  .c-date-editor-picker.el-picker-panel,
  .c-date-editor-picker.el-time-panel {
    color: #E4E7C1;
    background: linear-gradient(180deg, rgba(163, 144, 69, 0.53) 0%, rgba(105, 95, 42, 0.18) 35px, rgba(98, 88, 38, 0) 100px) rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(110, 103, 78, 0.9);
    .el-picker-panel__sidebar{
      border-right: 1px solid rgba(228, 231, 193, 0.2);
      .el-picker-panel__shortcut{
        color: #E4E7C1;
        &:hover {
          background: rgba(100, 86, 46, 0.4);
        }
      }
    }
    .el-date-range-picker__time-header, .el-date-picker__time-header{
      border-bottom: 1px solid rgba(228, 231, 193, 0.2);
      .el-date-range-picker__time-picker-wrap, .el-date-picker__editor-wrap{
        .el-input__inner {
          background: rgba(100,86,46,0.4)!important;
          color: #E4E7C1;
          &::placeholder {
            color: rgba(228,231,193,0.7);
          }
          &:hover{
            border-color: rgba(255, 238, 177, 0.6)!important;
          }
          &:focus-within{
            border-color: rgba(255, 238, 177, 1)!important;
          }
        }
      }
    }
    .el-date-range-picker__header, .el-date-picker__header{
      .el-picker-panel__icon-btn{
        color: #E4E7C1 !important;
      }
    }
    .el-date-picker__header{
      .el-date-picker__header-label{
        color: #E4E7C1 !important;
      }
    }
    .el-picker-panel__content{
      &.is-left{
        border-right: 1px solid rgba(228, 231, 193, 0.2);
      }
      .el-date-table th{
        color: #E4E7C1;
        border-bottom: 1px solid rgba(228, 231, 193, 0.2);
      }
      .el-date-table td{
        color: #E4E7C1 !important;
        &.available:hover{
          div{
            span{
              background: rgba(159, 152, 83, 0.4);
            }
          }
        }
        &.prev-month, &.next-month, &.disabled{
          color: rgba(228, 231, 193, 0.4) !important;
          div{
            background: none;
          }
          span{
            color: rgba(228, 231, 193, 0.4) !important;
          }
        }
        &.today{
          span{
            color: #FFFA28 !important;
          }
        }
        &.in-range{
          div{
            background: rgba(122, 113, 61, 0.36);
          }
          &.start-date{
            div{
              span{
                background: #9F9853 !important;
                color: #E4E7C1 !important;
              }
            }
          }
          &.end-date{
            div{
              span{
                background: #9F9853 !important;
                color: #E4E7C1 !important;
              }
            }
          }
        }
        &.current {
          div{
            span {
              background: #9F9853 !important;
              color: #E4E7C1 !important;
            }
          }
        }
      }
      .el-year-table, .el-month-table{
        td{
          .cell{
            color: #E4E7C1 !important;
          }
          &.today{
            .cell{
              color: #FFFA28 !important;
            }
          }
          &:not(.disabled):hover{
            .cell{
              background: rgba(159, 152, 83, 0.4);
            }
          }
          &.disabled{
            .cell{
              color: rgba(228, 231, 193, 0.4) !important;
              background: none !important;
            }
          }
          &.current{
            .cell{
              background: #9F9853 !important;
              color: #E4E7C1 !important;
            }
          }
        }
      }
    }
    .el-time-panel{
      color: #E4E7C1;
      background: linear-gradient(180deg, rgba(163, 144, 69, 0.53) 0%, rgba(105, 95, 42, 0.18) 35px, rgba(98, 88, 38, 0) 100px) rgba(0, 0, 0, 0.9);
      border: 1px solid rgba(110, 103, 78, 0.9);
    }
    .el-time-spinner{
      .el-time-spinner__wrapper{
        border-left: 1px solid rgba(228, 231, 193, 0.2);
        &:first-child{
          border: 0;
        }
      }
    }
    .el-time-range-picker__body{
      border: 1px solid rgba(228, 231, 193, 0.2);
    }
    .el-time-panel__content{
      &:before{
        border-top: 1px solid rgba(228, 231, 193, 0.2);
        border-bottom: 1px solid rgba(228, 231, 193, 0.2);
      }
      .el-time-spinner__item{
        color: #E4E7C1;
        &:not(.disabled):not(.active):hover{
          background: rgba(159, 152, 83, 0.4);
        }
        &.active{
          color: #FFFA28;
        }
      }
    }
    .el-picker-panel__footer, .el-time-panel__footer{
      background: none;
      border-top: 1px solid rgba(228, 231, 193, 0.2);
      .el-button, .el-time-panel__btn{
        height: 24px;
        line-height: 22px;
        background: rgba(100, 86, 46, 0.71);
        border: 0.5px solid rgba(100, 86, 46, 1);
        color: #E4E7C1 !important;
        &.is-plain, &.confirm{
          border: 0;
          line-height: 24px;
          background: radial-gradient(circle at 50% -250%, rgba(255, 219, 117, 0.81) 0%, rgba(0, 0, 0, 0) 89%), linear-gradient(180deg, rgba(255, 224, 72, 0.34) 0%, rgba(255, 241, 126, 0.1) 100%);
        }
      }
    }

    .el-scrollbar__bar {
      .el-scrollbar__thumb{
        background-color: rgba(100, 86, 46, 0.4);
        &:hover {
          background-color: rgba(100, 86, 46, 0.55);
        }
      }
    }
  }
  .c-confirm {
    &:after {
      background: linear-gradient(180deg, rgba(163, 144, 69, 0.53) 0%, rgba(105, 95, 42, 0.18) 10%, rgba(98, 88, 38, 0) 13%) rgba(0, 0, 0, 0.7);
      border: 1px solid rgba(110, 103, 78, 0.9);
    }
    .el-message-box__header {
      background: none;
      &:before{
        background: url("~@/assets/image/singleTabSel.png") no-repeat bottom center / 100% auto;
      }
      &:after{
        background: linear-gradient(90deg, rgba(228, 231, 193, 0), rgba(228, 231, 193, 1), rgba(228, 231, 193, 0));
      }

      .el-message-box__title {
        color: #FFFFFF;
        text-shadow: 1px 0px 4px #DCD277;
      }

      .el-message-box__headerbtn {
        background: url("~@/assets/image/video_gt/gt-close.png") no-repeat center / 100% 100%;
      }
    }
    .el-message-box__content {
      .el-message-box__message {
        color: #E4E7C1;
      }
    }
    .el-message-box__btns {
      .el-button {
        background: rgba(100, 86, 46, 0.71);
        color: #E4E7C1;
        border: 0.5px solid rgba(100, 86, 46, 1);
        line-height: 30px;
        &.el-button--primary {
          border: 0;
          line-height: 32px;
          text-shadow: 0px 2px 7px rgba(255,225,44,0.5);
          background: radial-gradient(circle at 50% -250%, rgba(255, 219, 117, 0.81) 0%, rgba(0, 0, 0, 0) 89%), linear-gradient(180deg, rgba(255, 224, 72, 0.34) 0%, rgba(255, 241, 126, 0.1) 100%);
          &:after{
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            pointer-events: none;
            background: url("~@/assets/image/video_gt/btn_l_t.png") no-repeat left top, url("~@/assets/image/video_gt/btn_l_b.png") no-repeat left bottom, url("~@/assets/image/video_gt/btn_r_t.png") no-repeat right top, url("~@/assets/image/video_gt/btn_r_b.png") no-repeat right bottom;
          }
        }
      }
    }
  }

  .c-tooltip, .c-tooltip-2 {
    background: rgba(22, 18, 9, 0.95) !important;
    color: rgba(228, 231, 193, 1) !important;
    .popper__arrow,
    .popper__arrow:after {
      display: unset !important;
    }

    &.el-tooltip__popper[x-placement^="top"] {
      margin-bottom: 8px !important;

      .popper__arrow,
      .popper__arrow:after {
        border-top-color: rgba(22, 18, 9, 0.95) !important;
      }
    }

    &.el-tooltip__popper[x-placement^="right"] {
      margin-left: 8px !important;

      .popper__arrow,
      .popper__arrow:after {
        border-left-color: rgba(22, 18, 9, 0.95) !important;
      }
    }

    &.el-tooltip__popper[x-placement^="bottom"] {
      margin-top: 8px !important;

      .popper__arrow,
      .popper__arrow:after {
        border-bottom-color: rgba(22, 18, 9, 0.95) !important;
      }
    }

    &.el-tooltip__popper[x-placement^="left"] {
      margin-right: 8px !important;

      .popper__arrow,
      .popper__arrow:after {
        border-right-color: rgba(22, 18, 9, 0.95) !important;
      }
    }
  }

  .c-tip {
    background: rgba(22, 18, 9, 0.95);
    color: rgba(228, 231, 193, 1);
  }
  .fd-table-box .el-table .caret-wrapper{
    .sort-caret.ascending{
      border-bottom-color: #FFEEB1;
    }
    .sort-caret.descending{
      border-top-color: #FFEEB1;
    }

  }
  .fd-table-box .el-table{
    .descending .sort-caret.descending{
      border-top-color: #FFFA28 !important;
    }
    .ascending .sort-caret.ascending{
      border-bottom-color: #FFFA28 !important;
    }
  }
}


.heatmap-canvas {
  z-index: 401;
  pointer-events: none;
}

.l2, .ar-l2, .banner-ly {
  .c-input,
  .c-select,
  .c-date-editor {
    background: rgba(2, 137, 109, 0.2) !important;
    &:not(.readonly):not(.disabled):hover:before{
      border: 1px solid rgba(2,137,109,.6);
    }
    &:not(.readonly):not(.disabled):focus-within:before, &.active:before{
      border: 1px solid #02896D !important;;
    }

    .el-input__inner,
    .el-range-input {
      color: #fff !important;

      &::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
      }
    }

    .el-input__icon {
      color: #fff !important;
      overflow: hidden;

      &.el-icon-circle-close {

        &:before {
          content: "\eacc";
          font-family: 'iconfont';
          font-weight: normal;
          font-size: 20px;
          color: #fff;
        }
      }
    }
    .c-suffix {
      color: #fff;
      i{
        &:after{
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }

    .el-input~i,
    .el-select~i {
      color: #fff;

      &:after {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }

  .c-select-dropdown.el-select-dropdown {
    background: linear-gradient(180deg, rgba(0, 19, 30, 0.7) 0%, #00131E 100%), linear-gradient(180deg, rgba(2, 137, 109, 1) 0%, rgba(2, 137, 109, 0) 100%) !important;
    border: 1px solid #075B4A !important;
    color: #fff !important;

    .el-select-dropdown__list {
      .el-select-dropdown__item {
        color: #fff !important;
        margin-right: 0 !important;

        &.hover {
          color: #fff !important;
        }

        &:hover {
          background: rgba(2, 137, 109, 0.4) !important;
          color: #fff !important;
        }

        &.selected {
          background: rgba(2, 137, 109, 0.4) !important;
          color: #F9FF6C !important;
        }

        &:after {
          content: "";
          color: #fff !important;
        }
      }
    }

    .el-select-dropdown__empty {
      color: #fff;
    }
    .el-scrollbar__bar{
      &.is-horizontal{
        bottom: 0 !important;
      }
      &.is-vertical{
        right: 0 !important;
      }
      .el-scrollbar__thumb{
        background-color: rgba(2,137,109,0.4);
        &:hover {
          background-color: rgba(2, 137, 109, 0.6);
        }
      }
    }
  }

  .c-popup {
    .popup-body {
      background: linear-gradient(180deg, rgba(0, 19, 30, 0.7) 0%, #00131E 100%) !important;;
      border: 1px solid;
      border-image: linear-gradient(360deg, rgba(7, 91, 74, 0.75), rgba(7, 91, 74, 0.3)) 1 1;
      &:before,
      &:after {
        content: "";
        width: 21px;
        height: 25px;
        background: url("~@/assets/image/ar_ly/footer-left.png") center / 100% 100%;
        position: absolute;
        top: auto;
        left: auto;
        bottom: -1px;
        pointer-events: none;
        z-index: 2;
        border-radius: 0;
      }
      &:before {
        left: -1px;
      }
      &:after {
        right: -1px;
        transform: rotateY(180deg);
      }

      .popup-header {
        background: linear-gradient(90deg, rgba(2, 137, 109, 0) 0%, rgba(2, 137, 109, 0.2) 51%, rgba(2, 137, 109, 0) 100%);
        color: #fff;
        text-shadow: 0px 0px 18px rgba(0, 245, 193, 0.7);
        font-weight: 600;
        border-radius: 0;

        &:before {
          content: "";
          width: 100%;
          height: 100%;
          opacity: 0.96;
          background: url("~@/assets/image/singleTabSel-ly.png") no-repeat bottom center, url("~@/assets/image/video_ly/popup-header-xx.png") no-repeat center / auto 100%, url("~@/assets/image/video_ly/popup-header-k.png") no-repeat top center;
          pointer-events: none;
          position: absolute;
          left: 0;
          bottom: auto;
          top: -1px;
        }

        &:after {
          content: "";
          width: 100%;
          height: 1px;
          background: linear-gradient( 270deg, rgba(255,255,255,0) 0%, #FFFFFF 50%, rgba(255,255,255,0) 100%);
          position: absolute;
          bottom: 1px;
          left: 50%;
          transform: translateX(-50%);
          pointer-events: none;
        }

        span {
          display: block;
          position: relative;

          &:before {
            content: "";
            width: 8px;
            height: 1px;
            background: #00FFF8;
            position: absolute;
            top: -1px;
            left: -1px;
          }
        }
      }


      .popup-header-tab{
        width: 100%;
        height: 48px;
        line-height: 48px;
        text-align: center;
        .popup-header-img {
          font-size: 14px;
          color: #E8F1FD;
          line-height: 48px;
          opacity: 1;
        }
        span {
          font-size: 16px;
          color: #E8F1FD;
          line-height: 48px;
          opacity: 1;
        }
        .content-header-box {
          width: 100%;
          height: 48px;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
          position: relative;
          &:after {
            content: "";
            width: 100%;
            height: 2px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: url("~@/assets/image/tags-btm-line.png") no-repeat bottom center;
          }
          /*tab页签 选中*/
          .chooseTab {
            width: 150px;
            height: 100%;
            color: rgba(232, 241, 253, 1);
            font-size: 14px;
            line-height: 32px;
            text-align: center;
            position: relative;
            &:after{
              content: "";
              width: 98px;
              height: 10px;
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              background: url("~@/assets/image/tag-btm-guang.png") no-repeat bottom center;
              pointer-events: none;
            }
          }
          /*tab页签 未选中*/
          .defaultTab {
            width: 150px;
            height: 100%;
            color: rgba(232, 241, 253, 0.7);
            font-size: 14px;
            line-height: 32px;
            text-align: center;
          }
        }
      }
      .popup-content {
        background: none;
        border-radius: 0;
      }

      .popup-close {
        background: url("~@/assets/image/video_ly/ly-close.png") no-repeat center / 100% 100%;
      }
    }
  }

  .c-button {
    border: 1px dotted rgba(2, 137, 109, 0.15);
    background: none;
    color: #fff;
    position: relative;
    line-height: 30px;
    border-radius: 0;
    z-index: 3;

    &:after {
      content: "";
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      position: absolute;
      left: 1px;
      top: 1px;
      z-index: -1;
      background: rgba(2, 137, 109, 0.1);
      box-shadow: inset 0px 0px 3px 0px rgba(2, 137, 109, 0.6);
    }

    &[submit],
    &.submit,
    &.on,
    &.error{
      &:before {
        content: "";
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        position: absolute;
        left: 1px;
        top: 1px;
        z-index: -2;
        background: url("~@/assets/image/video_ly/popup-header-xx.png") no-repeat center;
        overflow: hidden;
        opacity: 0.25;
      }

      &:after {
        background: rgba(2, 137, 109, 0.3);
        box-shadow: inset 0px 0px 13px 0px rgba(0, 255, 248, 0.6);
      }

      b {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;

        &:before,
        &:after {
          content: "";
          width: 5px;
          height: 5px;
          background: url("~@/assets/image/video_ly/btn-j.png") center / 100% 100%;
          position: absolute;
        }

        &:first-child {
          &:before {
            left: 0;
            top: 0;
          }

          &:after {
            right: 0;
            top: 0;
            transform: rotate(90deg);
          }
        }

        &:last-child {
          &:before {
            right: 0;
            bottom: 0;
            transform: rotate(180deg);
          }

          &:after {
            left: 0;
            bottom: 0;
            transform: rotate(270deg);
          }
        }
      }
    }
    &.error{
      border-color: rgba(237, 81, 88, 0.15);
      &:after {
        background: rgba(237,81,88,0.3);
        box-shadow: inset 0px 0px 13px 0px rgba(237,81,88,0.6);
      }
      b{
        &:before,
        &:after {
          filter: drop-shadow(#ED5158 10000px 0);
        }
        &:first-child {
          &:before {
            transform: translateX(-10000px);
          }
          &:after {
            transform: translateY(-10000px) rotate(90deg);
          }
        }
        &:last-child {
          &:before {
            transform: translateX(10000px) rotate(180deg);
          }
          &:after {
            transform: translateY(10000px) rotate(270deg);
          }
        }
      }
    }
    &:hover {
      opacity: 0.6;
    }

    &:active {
      opacity: 0.8;
    }

    &[disabled],
    &.disabled {
      text-shadow: none;
      cursor: not-allowed;
      opacity: 0.4 !important;
    }
  }

  .c-no-datas-block {
    color: #fff;
    &:before {
      background-image: url("~@/assets/image/noData-ly.png");;
    }
  }

  .c-date-editor.el-date-editor {
    .el-range-separator {
      color: #fff !important;
    }
  }

  .c-date-editor-picker.el-picker-panel,
  .c-date-editor-picker.el-time-panel {
    color: #fff;
    background: linear-gradient(180deg, rgba(0, 67, 63, 0.85) 0%, rgba(0, 19, 30, 0.74) 21%, #00131E 100%);
    border: 1px solid #075B4A;
    .el-picker-panel__sidebar{
      border-right: 1px solid rgba(255, 255, 255, 0.2);
      .el-picker-panel__shortcut{
        color: #fff;
        &:hover {
          background: rgba(2, 137, 109, 0.4);
        }
      }
    }
    .el-date-range-picker__time-header, .el-date-picker__time-header{
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      .el-date-range-picker__time-picker-wrap, .el-date-picker__editor-wrap{
        .el-input__inner {
          background: rgba(2,137,109,0.2)!important;
          color: #fff;
          &::placeholder {
            color: rgba(255,255,255,0.7);
          }
          &:hover{
            border-color: rgba(2,137,109,0.6)!important;
          }
          &:focus-within{
            border-color: rgba(2,137,109,1)!important;
          }
        }
      }
    }
    .el-date-range-picker__header, .el-date-picker__header{
      .el-picker-panel__icon-btn{
        color: #fff !important;
      }
    }
    .el-date-picker__header{
      .el-date-picker__header-label{
        color: #fff !important;
      }
    }
    .el-picker-panel__content{
      &.is-left{
        border-right: 1px solid rgba(255, 255, 255, 0.2);
      }
      .el-date-table th{
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }
      .el-date-table td{
        color: #fff !important;
        &.available:hover{
          div{
            span{
              background: rgba(2, 137, 109, 0.4) !important;
            }
          }
        }
        &.prev-month, &.next-month, &.disabled{
          color: rgba(255,255,255,0.4) !important;
          div{
            background: none;
          }
          span{
            color: rgba(255,255,255,0.4) !important;
          }
        }
        &.today{
          span{
            color: #0DC985 !important;
          }
        }
        &.in-range{
          div{
            background: rgba(2, 137, 109, 0.4) !important;
          }
          &.start-date{
            div{
              span{
                background: #02896D !important;
                color: #fff !important;
              }
            }
          }
          &.end-date{
            div{
              span{
                background: #02896D !important;
                color: #fff !important;
              }
            }
          }
        }
        &.current {
          div{
            span {
              background: #02896D !important;
              color: #fff !important;
            }
          }
        }
      }
      .el-year-table, .el-month-table{
        td{
          .cell{
            color: #fff !important;
          }
          &.today{
            .cell{
              color: #0DC985 !important;
            }
          }
          &:not(.disabled):hover{
            .cell{
              background: rgba(2, 137, 109, 0.4);
            }
          }
          &.disabled{
            .cell{
              color: rgba(255,255,255,0.4) !important;
              background: none !important;
            }
          }
          &.current{
            .cell{
              background: #02896D !important;
              color: #fff !important;
            }
          }
        }
      }
    }
    .el-time-panel{
      background: linear-gradient(180deg, rgba(0, 67, 63, 0.85) 0%, rgba(0, 19, 30, 0.74) 21%, #00131E 100%);
      border: 1px solid #075B4A;
    }
    .el-time-spinner{
      .el-time-spinner__wrapper{
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        &:first-child{
          border: 0;
        }
      }
    }
    .el-time-range-picker__body{
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .el-time-panel__content{
      &:before{
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }
      &:after{
        border: 0;
      }
      .el-time-spinner__item{
        color: #fff;
        &:not(.disabled):not(.active):hover{
          background: rgba(2, 137, 109, 0.4);
        }
        &.active{
          color: #02896D;
        }
      }
    }
    .el-picker-panel__footer, .el-time-panel__footer{
      border-top: 1px solid rgba(255,255,255,0.2);
      .el-button, .el-time-panel__btn{
        height: 24px;
        line-height: 22px;
        border: 1px dotted rgba(2, 137, 109, 0.15);
        background: none;
        border-radius: 0;
        color: #fff !important;
        &:after {
          content: "";
          width: calc(100% - 2px);
          height: calc(100% - 2px);
          position: absolute;
          left: 1px;
          top: 1px;
          z-index: -1;
          background: rgba(2, 137, 109, 0.1);
          box-shadow: inset 0px 0px 3px 0px rgba(2, 137, 109, 0.6);
        }
        &.is-plain, &.confirm{
          background: url("~@/assets/image/video_ly/btn-lt.png") no-repeat left top, url("~@/assets/image/video_ly/btn-lb.png") no-repeat left bottom, url("~@/assets/image/video_ly/btn-rt.png") no-repeat right top, url("~@/assets/image/video_ly/btn-rb.png") no-repeat right bottom;
          &:after{
            background: url("~@/assets/image/video_ly/popup-header-xx.png") no-repeat center, rgba(2,137,109,0.3);
            box-shadow: inset 0px 0px 13px 0px rgba(0,255,248,0.6);
          }
        }
      }
    }

    .el-scrollbar__bar {
      .el-scrollbar__thumb{
        background-color: rgba(2,137,109,0.4);
        &:hover {
          background-color: rgba(2, 137, 109, 0.6);
        }
      }
    }
  }
  .c-confirm {
    background: linear-gradient(180deg, rgba(0, 19, 30, 0.7) 0%, #00131E 100%) !important;
    border: 1px solid !important;
    border-image: linear-gradient(360deg, rgba(7, 91, 74, 0.75), rgba(7, 91, 74, 0.3)) 1 1 !important;
    border-radius: 0 !important;
    &:before,
    &:after {
      content: "";
      width: 21px;
      height: 25px;
      background: url("~@/assets/image/ar_ly/footer-left.png") center / 100% 100%;
      position: absolute;
      top: auto;
      left: auto;
      bottom: -1px;
      pointer-events: none;
      z-index: 2;
      border-radius: 0;
    }
    &:before {
      left: -1px;
    }
    &:after {
      right: -1px;
      transform: rotateY(180deg);
    }

    .el-message-box__header {
      background: linear-gradient(90deg, rgba(2, 137, 109, 0) 0%, rgba(2, 137, 109, 0.2) 51%, rgba(2, 137, 109, 0) 100%);
      &:before {
        width: 100%;
        height: calc(100% + 1px);
        background: url("~@/assets/image/singleTabSel-ly.png") no-repeat bottom center, url("~@/assets/image/video_ly/popup-header-xx.png") no-repeat center / auto 100%, url("~@/assets/image/video_ly/popup-header-k.png") no-repeat top center;
        pointer-events: none;
      }
      &:after{
        background: linear-gradient( 270deg, rgba(255,255,255,0) 0%, #FFFFFF 50%, rgba(255,255,255,0) 100%);
      }

      .el-message-box__title {
        width: 100%;
        height: 100%;
        color: #FFFFFF;
        text-shadow: 0px 0px 18px rgba(0,245,193,0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        &:before {
          content: "";
          width: 8px;
          height: 1px;
          background: #00FFF8;
          position: absolute;
          top: -1px;
          left: -1px;
        }
      }

      .el-message-box__headerbtn {
        background: url("~@/assets/image/video_ly/ly-close.png") no-repeat center / 100% 100%;
      }
    }

    .el-message-box__content {
      .el-message-box__message {
        color: #FFFFFF;
      }
    }
    .el-message-box__btns {
      .el-button {
        border: 1px dotted rgba(2, 137, 109, 0.15);
        background: none;
        color: #fff;
        position: relative;
        line-height: 30px;
        border-radius: 0;
        z-index: 3;
        &:after {
          content: "";
          width: calc(100% - 2px);
          height: calc(100% - 2px);
          position: absolute;
          left: 1px;
          top: 1px;
          z-index: -1;
          background: rgba(2, 137, 109, 0.1);
          box-shadow: inset 0px 0px 3px 0px rgba(2, 137, 109, 0.6);
        }
        &.el-button--primary {
          &:before {
            content: "";
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            position: absolute;
            left: 1px;
            top: 1px;
            z-index: -2;
            background: url("~@/assets/image/video_ly/popup-header-xx.png") no-repeat center;
            overflow: hidden;
            opacity: 0.25;
          }
          &:after {
            background: rgba(2, 137, 109, 0.3);
            box-shadow: inset 0px 0px 13px 0px rgba(0, 255, 248, 0.6);
          }
          span {
            display: block;
            background: url("~@/assets/image/video_ly/btn-lt.png") no-repeat left top, url("~@/assets/image/video_ly/btn-lb.png") no-repeat left bottom, url("~@/assets/image/video_ly/btn-rt.png") no-repeat right top, url("~@/assets/image/video_ly/btn-rb.png") no-repeat right bottom;
          }
        }
      }
    }
  }

  .c-tooltip, .c-tooltip-2 {
    background: #00221B !important;
    color: #fff !important;
    .popper__arrow,
    .popper__arrow:after {
      display: unset !important;
    }

    &.el-tooltip__popper[x-placement^="top"] {
      margin-bottom: 8px !important;

      .popper__arrow,
      .popper__arrow:after {
        border-top-color: #00221B !important;
      }
    }

    &.el-tooltip__popper[x-placement^="right"] {
      margin-left: 8px !important;

      .popper__arrow,
      .popper__arrow:after {
        border-left-color: #00221B !important;
      }
    }

    &.el-tooltip__popper[x-placement^="bottom"] {
      margin-top: 8px !important;

      .popper__arrow,
      .popper__arrow:after {
        border-bottom-color: #00221B !important;
      }
    }

    &.el-tooltip__popper[x-placement^="left"] {
      margin-right: 8px !important;

      .popper__arrow,
      .popper__arrow:after {
        border-right-color: #00221B !important;
      }
    }
  }

  .c-tip {
    background: #00221B;
    color: #fff;
  }
  .fd-table-box .el-table .caret-wrapper{
    .sort-caret.ascending{
      border-bottom-color: #FFFFFF;
    }
    .sort-caret.descending{
      border-top-color: #FFFFFF;
    }

  }
  .fd-table-box .el-table{
    .descending .sort-caret.descending{
      border-top-color: #FFFA28 !important;
    }
    .ascending .sort-caret.ascending{
      border-bottom-color: #FFFA28 !important;
    }
  }
}

.f-dialog{
  border-radius: 4px !important;
  min-width: 450px;
  max-width: 1200px;
  min-height: 172px;
  max-height: 860px;
  .el-dialog__header{
    padding: 0 12px !important;
    border-bottom: 1px solid #EBEEF5 !important;
    height: 49px;
    .el-dialog__title{
      height: 48px;
      line-height: 16px;
      font-size: 16px;
      display: inline-block;
      padding: 16px 0;
      font-weight: bold;
      color: #303133;
    }
    .el-dialog__headerbtn{
      top: 16px;
      right: 12px;
      height: 16px;
      line-height: 16px;
      &:hover{
        .el-dialog__close{
          color: var(--theme, #FF6A6C);
        }
      }
      .el-dialog__close{
        color: #606266;
      }
    }
  }
  .el-dialog__body{
    padding: 12px 12px 0 !important;
    .el-form{
      .el-row {
        .el-form-item {
          margin-bottom: 12px;
          &.is-error{
            margin-bottom: 0;
          }
          .el-form-item__label {
            font-size: 14px;
            font-weight: 400;
            color: #606266;
            &:before{
              margin-right: 0;
            }
          }

          .el-form-item__content {
            padding: 0 0 0 12px;
            line-height: unset;
            display: flex;
            flex-wrap: wrap;
            .el-form-item__error{
              &.el-zoom-in-top-leave-active {
                display: none;
              }
              line-height: 24px;
              width: 100%;
              padding: 0;
              margin: 0;
              color: #FF6A6C;
              position: unset;
            }
          }
        }


        .el-textarea{
          .el-textarea__inner{
            border: 1px solid #DCDFE6;
            font-weight: 400;
            color: #606266;
            font-size: 14px;
            padding-left: 12px;
            &::placeholder {
              font-weight: 400;
              color: #909399;
              font-size: 14px;
            }
            &:focus {
              border-color: #A9A9A9;
            }
          }
          &.is-disabled{
            .el-textarea__inner{
              background: #F5F7FA;
              border: 1px solid #DCDFE6;
              color: #909399;
            }
          }
        }
        .el-input,
        .el-input-number{
          line-height: 32px;
          .el-input__inner {
            font-weight: 400;
            color: #606266;
            font-size: 14px;
            padding-left: 12px;
            &::placeholder {
              font-weight: 400;
              color: #909399;
              font-size: 14px;
            }
          }
          .el-input__suffix {
            .el-input__suffix-inner {
              height: 100%;
              .el-icon-circle-close {
                &:before {
                  font-family: iconfont;
                  content: "\E7E7";
                }
              }
              .el-select__caret {
                line-height: 30px;
                height: 30px;
                color: #606266;
              }
              .is-reverse {
                color: #909399;
              }
            }
          }
          &:focus,
          &:hover {
            .el-input__suffix {
              .el-input__suffix-inner {
                .el-select__caret,
                .is-reverse {
                  color: #909399;
                }
              }
            }
          }
          &.is-disabled{
            .el-input__inner{
              background-color: #F5F7FA;
              border-color: #DCDFE6;
              color: #909399;
            }
            .el-input__suffix {
              .el-input__suffix-inner {
                .el-select__caret {
                  opacity: 0.4;
                }
              }
            }
          }
          &.is-focus{
            .el-input__inner{
              border-color: #A9A9A9;
            }
          }
        }
        .el-input-number{
          line-height: 30px;
          .el-input-number__decrease,
          .el-input-number__increase{
            background: #F5F7FA;
            color: #909399;
            &:hover{
              color: #909399;
            }
            &.is-disabled{
              border-color: #dcdfe6;
              background: #f5f7fa;
              color: rgba(144, 147, 153, 0.4);
            }
          }
          .el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),
          .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
            border-color: #C0C4CC;
          }
        }
        .el-button:not(.el-button--text){
          height: 32px;
          border-radius: 4px;
          padding: 8px 12px;
          background: #FFF;
          border: 1px solid #DCDFE6;
          color: #606266;
          &:hover{
            background: #FFF;
            border: 1px solid #DCDFE6;
            color: #606266;
            opacity: 0.6;
          }
          &:active{
            background: #FFF;
            border: 1px solid #DCDFE6;
            color: #606266;
            opacity: 0.8;
          }
          span{
            line-height: 14px;
            height: 14px;
            display: inline-block;
            font-size: 14px;
          }
          &.el-button--primary{
            color: #FFF;
            background-color: var(--theme, #FF6A6C);
            border-color: var(--theme, #FF6A6C);
            &:hover{
              color: #FFF;
              background-color: var(--theme, #FF6A6C);
              border-color: var(--theme, #FF6A6C);
              opacity: 0.6;
            }
            &:active{
              color: #FFF;
              background-color: var(--theme, #FF6A6C);
              border-color: var(--theme, #FF6A6C);
              opacity: 0.8;
            }
          }
        }
        .vue-treeselect{
          font-size: 14px;
          &.vue-treeselect--open{
            .vue-treeselect__menu-container {
              &:before {
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                top: 0;
                left: 10%;
                border: 6px solid transparent;
                border-bottom-color: #EBEEF5;
                transform: translateX(-50%);
              }

              &:after {
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                top: 2px;
                left: 10%;
                border: 5px solid transparent;
                border-bottom-color: #FFFFFF;
                transform: translateX(-50%);
              }
            }
          }
          .vue-treeselect__control{
            padding:0 10px 0 0;
            border-radius: 4px !important;
            height: 32px;
            &:hover{
              .vue-treeselect__x-container{
                &:before{
                  font-family: iconfont;
                  content: "\E7E7";
                  cursor: pointer;
                  font-size: 14px;
                  color: #909399;
                }
              }
            }
            .vue-treeselect__value-container{
              .vue-treeselect__single-value{
                color: #606266;
                font-size: 14px;
                font-weight: 400;
                padding-left: 12px;
                font-family: sans-serif;
                line-height: 30px;
              }
              .vue-treeselect__placeholder{
                padding-left: 12px;
                font-weight: 400;
                color: #909399;
                font-size: 14px;
                font-family: sans-serif;
                line-height: 30px;
              }
            }
            .vue-treeselect__x-container{
              .vue-treeselect__x{
                display: none;
              }
            }
            .vue-treeselect__input-container{
              padding-left: 12px;
            }
            .vue-treeselect__control-arrow-container{
              font-size: 14px;
              color: #606266;
            }
          }
          .vue-treeselect__menu-container{
            .vue-treeselect__menu{
              padding: 0;
              margin-top: 0;
              top: 12px;
              border-radius: 4px;
              line-height: 32px;
              border: 0;
              box-shadow: 0px 3px 10px 2px rgba(0,0,0,0.05);
              &::-webkit-scrollbar-thumb{
                border: 0;
                border-radius: 10px;
                background: #DCDFE6;
              }
              &::-webkit-scrollbar{
                width: 6px;
              }
              .vue-treeselect__list{
                .vue-treeselect__option-arrow-placeholder{
                  width: 6px;
                }
                .vue-treeselect__label-container{
                  .vue-treeselect__label{
                    color: #606266;
                    font-size: 14px;
                  }
                }
                .vue-treeselect__option-arrow-container{
                  .vue-treeselect__option-arrow{
                    color: #909399;
                  }
                }
                .vue-treeselect__option {
                  background: none;
                  &.vue-treeselect__option--highlight {
                    position: relative;
                    z-index: 2;
                    &:after {
                      content: "";
                      width: 100%;
                      height: 100%;
                      position: absolute;
                      left: 0;
                      top: 0;
                      z-index: -1;
                      background: var(--theme, #FF6A6C);
                      opacity: 0.1;
                    }
                  }
                  &.vue-treeselect__option--selected {
                    @extend .vue-treeselect__option--highlight;
                    .vue-treeselect__label {
                      color: var(--theme, #FF6A6C);
                    }
                  }
                }
              }
            }
          }
          &.vue-treeselect--focused:not(.vue-treeselect--open){
            .vue-treeselect__control{
              box-shadow: none;
              border-color: #DCDFE6;
            }
          }
          &.vue-treeselect--disabled{
            .vue-treeselect__control{
              background: #F5F7FA;
              border: 1px solid #DCDFE6;
              .vue-treeselect__value-container{
                .vue-treeselect__single-value{
                  color: #909399;
                }
              }
              .vue-treeselect__control-arrow-container{
                color: #909399;
              }
            }
          }
        }
        .el-checkbox{
          &.is-bordered{
            padding: 7px 12px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            display: flex;
            align-items: center;
            margin-right: 12px;
            margin-left: 0;
            .el-checkbox__input{
              height: 16px;
              .el-checkbox__inner{
                height: 16px;
                width: 16px;
                border-radius: 4px;
                &:after{
                  height: 7px;
                  width: 3px;
                  border: 2px solid #FFF;
                  left: 5px;
                  top: 2px;
                  border-left: 0;
                  border-top: 0;
                }
                &:before{
                  height: 4px;
                }
              }
            }
            .el-checkbox__label{
              font-size: 14px;
              font-weight: 400;
              color: #606266;
              padding-left: 6px;
            }
            &.is-checked{
              border-color: var(--theme, #FF6A6C);
            }
          }
          &.is-disabled{
            opacity: 0.4;
            .el-checkbox__input{
              .el-checkbox__inner{
                background-color: #FFF;
                border-color: #DCDFE6;
              }
              &.is-checked,
              &.is-indeterminate{
                .el-checkbox__inner{
                  background-color: var(--theme, #FF6A6C);
                  border-color: var(--theme, #FF6A6C);
                }
              }
            }
          }
        }

        .el-date-editor {
          padding: 0 0 0 12px;
          .el-range__icon {
            line-height: 30px;
            margin-left: 0;
            width: 14px;
            font-size: 14px;
            color: #909399;
            &:before {
              font-family: iconfont;
              content: "\EB84";
            }
          }

          .el-range-input {
            font-weight: 400;
            color: #606266;
            font-size: 14px;
            text-align: left;
            padding-left: 12px;
            &::placeholder {
              font-weight: 400;
              color: #909399;
              font-size: 14px;
            }
          }

          .el-range-separator {
            font-weight: 400;
            color: #606266;
            font-size: 14px;
            padding: 0;
            line-height: 30px;
          }
          .el-range__close-icon{
            line-height: 30px;
            margin-left: 0;
            font-size: 14px;
            color: #909399;
          }

          &.is-active {
            border-color: #909399;
          }
        }
        .el-radio-group{
          .el-radio{
            line-height: 32px;
            font-weight: 400;
            margin-right: 24px;
            .el-radio__input{
              height: 16px;
              .el-radio__inner{
                width: 16px;
                height: 16px;
                background-color: #FFFFFF;
                border-color: #DCDFE6;
                &:after{
                  width: 6px;
                  height: 6px;
                }
              }
            }
            .el-radio__label{
              padding-left: 6px;
              font-weight: 400;
              font-size: 14px;
              color: #606266;
            }
            &.is-disabled{
              .el-radio__input{
                .el-radio__inner{
                  opacity: 0.4;
                }
                &.is-checked{
                  .el-radio__inner{
                    &:after{
                      background-color: #FFFFFF;
                    }
                  }
                }
              }
              .el-radio__label{

              }
            }
            &.is-checked{
              .el-radio__input {
                .el-radio__inner {
                  background-color: var(--theme, #FF6A6C);
                  border-color: var(--theme, #FF6A6C);
                }
              }
            }
            &:last-child{
              margin-right: 0
            }
          }
        }
        .el-col.detail{
          .el-form-item{
            .el-form-item__label{
              height: 20px;
              font-size: 14px;
              font-weight: 400;
              color: #909399;
              line-height: 20px;
            }
            .el-form-item__content{
              font-size: 14px;
              font-weight: 400;
              color: #606266;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
  &.el-dialog>.el-dialog__footer{
    padding: 12px;
    border-top: 1px solid rgba(0,0,0,0.06);
    div{
      display: flex;
      float: right;
      .el-button{
        height: 32px;
        border-radius: 4px;
        padding: 8px 12px;
        min-width: 60px;
         background: #FFF;
         border: 1px solid #DCDFE6;
         color: #606266;
        margin: 0 0 0 12px;
        &:hover{
           background: #FFF;
           border: 1px solid #DCDFE6;
           color: #606266;
          opacity: 0.6;
        }
        &:active{
           background: #FFF;
           border: 1px solid #DCDFE6;
           color: #606266;
          opacity: 0.8;
        }
        span{
          line-height: 14px;
          height: 14px;
          display: inline-block;
          font-size: 14px;
        }
         &.el-button--primary{
           color: #FFF;
           background-color: var(--theme, #FF6A6C);
           border-color: var(--theme, #FF6A6C);
           &:hover{
             color: #FFF;
             background-color: var(--theme, #FF6A6C);
             border-color: var(--theme, #FF6A6C);
             opacity: 0.6;
           }
           &:active{
             color: #FFF;
             background-color: var(--theme, #FF6A6C);
             border-color: var(--theme, #FF6A6C);
             opacity: 0.8;
           }
         }
      }
    }

  }
}
.f-dialog.jn-clk-dialog .el-dialog__body .el-form .el-row:first-child .el-col .el-form-item{
  margin-top: 0;
}
.vue-treeselect{
  font-size: 14px;
  &.vue-treeselect--open{
    .vue-treeselect__menu-container {
      &:before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 10%;
        border: 6px solid transparent;
        border-bottom-color: #EBEEF5;
        transform: translateX(-50%);
      }

      &:after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 2px;
        left: 10%;
        border: 5px solid transparent;
        border-bottom-color: #FFFFFF;
        transform: translateX(-50%);
      }
    }
  }
  .vue-treeselect__menu-container{
    .vue-treeselect__menu{
      padding: 0;
      margin-top: 0;
      top: 12px;
      border-radius: 4px;
      line-height: 32px;
      border: 0;
      box-shadow: 0px 3px 10px 2px rgba(0,0,0,0.05);
      &::-webkit-scrollbar-thumb{
        border: 0;
        border-radius: 10px;
        background: #DCDFE6;
      }
      &::-webkit-scrollbar{
        width: 6px;
      }
      .vue-treeselect__list{
        .vue-treeselect__option-arrow-placeholder{
          width: 6px;
        }
        .vue-treeselect__label-container{
          .vue-treeselect__label{
            color: #606266;
            font-size: 14px;
          }
        }
        .vue-treeselect__option-arrow-container{
          .vue-treeselect__option-arrow{
            color: #909399;
          }
        }
        .vue-treeselect__option {
          background: none;
          &.vue-treeselect__option--highlight {
            position: relative;
            z-index: 2;
            &:after {
              content: "";
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              z-index: -1;
              background: var(--theme, #FF6A6C);
              opacity: 0.1;
            }
          }
          &.vue-treeselect__option--selected {
            @extend .vue-treeselect__option--highlight;
            .vue-treeselect__label {
              color: var(--theme, #FF6A6C);
            }
          }
        }
      }
    }
  }
  &.vue-treeselect--focused:not(.vue-treeselect--open){
    .vue-treeselect__control{
      box-shadow: none;
      border-color: #DCDFE6;
    }
  }
}
.f-buttons{
  .el-col{
    display: flex;
    float: left;
    &.f-buttons-right{
      justify-content: end;
      float: right;
      .el-button{
        margin: 0 0 0 12px!important;
      }
    }
  }
  .el-button{
    height: 32px;
    border-radius: 4px;
    padding: 8px 12px;
    min-width: 60px;
    background: #FFF !important;
    border: 1px solid #DCDFE6 !important;
    color: #606266 !important;
    margin: 0 12px 0 0!important;
    font-size: 14px;
    span{
      line-height: 14px;
      height: 14px;
      display: inline-block;
      font-size: 14px;
    }
    &:hover{
      background: #FFF !important;
      border: 1px solid #DCDFE6 !important;
      color: #606266 !important;
      opacity: 0.6;
    }
    &:active{
      background: #FFF !important;
      border: 1px solid #DCDFE6 !important;
      color: #606266 !important;
      opacity: 0.8;
    }
    &:focus{
      background: #FFF !important;
      border: 1px solid #DCDFE6 !important;
      color: #606266 !important;
    }
    &.ct-btn{
      display: flex;
      align-items: center;
      .iconfont{
        font-size: 14px;
        margin-right: 6px;
      }
      span{
        display: flex;
        align-items: center;
      }
      .ct-icon{
        margin-right: 6px;
        .icon{
          color: #606266 !important;
        }
      }
    }
    &.phantom{
      background: #FFFFFF;
      border: 1px solid var(--theme, #FF6A6C);
      color: var(--theme, #FF6A6C);
      &:hover{
        background: #FFFFFF;
        border: 1px solid var(--theme, #FF6A6C);
        color: var(--theme, #FF6A6C);
        opacity: 0.6;
      }
      &:active{
        background: #FFFFFF;
        border: 1px solid var(--theme, #FF6A6C);
        color: var(--theme, #FF6A6C);
        opacity: 0.8;
      }
    }
    &.el-button--primary{
      color: #FFF !important;
      background-color: var(--theme, #FF6A6C) !important;
      border-color: var(--theme, #FF6A6C) !important;
      &:hover{
        color: #FFF !important;
        background-color: var(--theme, #FF6A6C) !important;
        border-color: var(--theme, #FF6A6C) !important;
        opacity: 0.6;
      }
      &:active{
        color: #FFF !important;
        background-color: var(--theme, #FF6A6C) !important;
        border-color: var(--theme, #FF6A6C) !important;
        opacity: 0.8;
      }
      .ct-icon{
        .icon{
          color: #FFF !important;
        }
      }
    }
    &.is-plain{
      color: #606266 !important;
      border: 1px solid #DCDFE6 !important;
      background: #FFFFFF !important;
      &:hover{
        color: #606266 !important;
        border: 1px solid #DCDFE6 !important;
        background: #FFFFFF !important;
        opacity: 0.6;
      }
      &:active{
        color: #606266 !important;
        border: 1px solid #DCDFE6 !important;
        background: #FFFFFF !important;
        opacity: 0.8;
      }
    }
    &.el-button--primary.new-primary,
    &.el-button--primary.is-plain{
      color: var(--theme, #FF6A6C) !important;
      background-color: #FFFFFF !important;
      border-color: var(--theme, #FF6A6C) !important;
      &:hover{
        color:var(--theme, #FF6A6C) !important;
        background-color: #FFFFFF !important;
        border-color: var(--theme, #FF6A6C) !important;
        opacity: 0.6;
      }
      &:active{
        color:var(--theme, #FF6A6C) !important;
        background-color: #FFFFFF !important;
        border-color: var(--theme, #FF6A6C) !important;
        opacity: 0.8;
      }
      .ct-icon{
        .icon{
          color:var(--theme, #FF6A6C) !important;
        }
      }
    }
    &.iconfont{
      span{
        margin-left: 6px;
      }
    }
  }
  .el-button+.el-button{
    margin-left: 0;
  }
}
.f-container{
  padding: 24px 24px;
  height: 100%;
  .f-search{
    display: flex;
    flex-direction: column;
    .f-from{
      .el-row{
        .el-col{
          .el-form-item{
            margin-bottom: 12px;
            .el-form-item__label{
              font-size: 14px;
              font-weight: 400;
              color: #606266;
            }
            .el-form-item__content{
              padding: 0 0 0 12px;
            }
          }
        }
      }
    }
    .el-input{
      .el-input__inner{
        font-weight: 400;
        color: #606266;
        font-size: 14px;
        padding-left: 12px;
        &::placeholder{
          font-weight: 400;
          color: #909399;
          font-size: 14px;
        }
        &:hover{
          color: #909399
        }
      }
      .el-input__suffix{
        .el-input__suffix-inner{
          .el-icon-circle-close{
            &:before{
              font-family: iconfont;
              content: "\E7E7";
            }
          }
          .el-select__caret{
            line-height: 30px;
            height: 30px;
            color: #606266;
          }
          .is-reverse{
            color: #909399;
          }
        }
      }
      &:focus,
      &:hover{
        .el-input__suffix{
          .el-input__suffix-inner{
            .el-select__caret,
            .is-reverse{
              color: #909399;
            }
          }
        }
      }
    }
    .el-date-editor{
      padding: 0 0 0 12px;
      .el-range__icon{
        line-height: 30px;
        margin-left: 0;
        width: 14px;
        font-size: 14px;
        color: #909399;
        &:before{
          font-family: iconfont;
          content: "\EB84";
        }
      }
      .el-range-input{
        font-weight: 400;
        color: #606266;
        font-size: 14px;
        text-align: left;
        padding-left: 12px;
        &::placeholder{
          font-weight: 400;
          color: #909399;
          font-size: 14px;
        }
      }
      .el-range-separator{
        font-weight: 400;
        color: #606266;
        font-size: 14px;
        padding: 0;
        height: 30px;
        line-height:30px;
      }
      .el-icon-circle-close{
        color: #909399;
        &:before{
          font-family: iconfont;
          content: "\E7E7";
        }
      }
      &.is-active{
        border-color: #A9A9A9;
      }
    }
    .vue-treeselect{
      font-size: 14px;
      &.vue-treeselect--open{
        .vue-treeselect__menu-container {
          &:before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 0;
            left: 10%;
            border: 6px solid transparent;
            border-bottom-color: #EBEEF5;
            transform: translateX(-50%);
          }

          &:after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 2px;
            left: 10%;
            border: 5px solid transparent;
            border-bottom-color: #FFFFFF;
            transform: translateX(-50%);
          }
        }
      }
      .vue-treeselect__control{
        padding:0 10px 0 0;
        border-radius: 4px !important;
        &:hover{
          .vue-treeselect__x-container{
            &:before{
              font-family: iconfont;
              content: "\E7E7";
              cursor: pointer;
              font-size: 14px;
              color: #909399;
            }
          }
        }
        .vue-treeselect__value-container{
          .vue-treeselect__single-value{
            color: #606266;
            font-size: 14px;
            font-weight: 400;
            padding-left: 12px;
            font-family: sans-serif;
          }
          .vue-treeselect__placeholder{
            padding-left: 12px;
            font-weight: 400;
            color: #909399;
            font-size: 14px;
            font-family: sans-serif;
          }
        }
        .vue-treeselect__x-container{
          .vue-treeselect__x{
            display: none;
          }
        }
        .vue-treeselect__input-container{
          padding-left: 12px;
        }
        .vue-treeselect__control-arrow-container{
          font-size: 14px;
          color: #606266;
        }
      }
      .vue-treeselect__menu-container{
        .vue-treeselect__menu{
          padding: 0;
          margin-top: 0;
          top: 12px;
          border-radius: 4px;
          line-height: 32px;
          border: 0;
          box-shadow: 0px 3px 10px 2px rgba(0,0,0,0.05);
          &::-webkit-scrollbar-thumb{
            border: 0;
            border-radius: 10px;
            background: #DCDFE6;
          }
          &::-webkit-scrollbar{
            width: 6px;
          }
          .vue-treeselect__list{
            .vue-treeselect__option-arrow-placeholder{
              width: 6px;
            }
            .vue-treeselect__label-container{
              .vue-treeselect__label{
                color: #606266;
                font-size: 14px;
              }
            }
            .vue-treeselect__option-arrow-container{
              .vue-treeselect__option-arrow{
                color: #909399;
              }
            }
            .vue-treeselect__option {
              background: none;
              &.vue-treeselect__option--highlight {
                position: relative;
                z-index: 2;
                &:after {
                  content: "";
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  left: 0;
                  top: 0;
                  z-index: -1;
                  background: var(--theme, #FF6A6C);
                  opacity: 0.1;
                }
              }
              &.vue-treeselect__option--selected {
                @extend .vue-treeselect__option--highlight;
                .vue-treeselect__label {
                  color: var(--theme, #FF6A6C);
                }
              }
            }
          }
        }
      }
      &.vue-treeselect--focused:not(.vue-treeselect--open){
        .vue-treeselect__control{
          box-shadow: none;
          border-color: #DCDFE6;
        }
      }
    }
  }

  .f-hr{
    background-color: #EBEEF5;
    border: none;
    height: 1px;
    margin: 12px 0;
  }
}
.f-table{
  margin-top: 12px;
  .el-table{
    &:before{
      content: '';
      width: 100%;
      height: 1px;
      position: absolute;
      left: 0;
      color: #EBEEF5;
    }
    .el-table__fixed-header-wrapper,
    .el-table__header-wrapper{
      .el-table__header{
        .el-table__cell{
          padding: 0;
          height: 40px;
          .cell{
            font-size: 14px;
            font-weight: 600;
            color: #606266;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
            min-width: unset;
            .caret-wrapper{
              height: 14px;
              width: 14px;
              margin-left: 6px;
              .sort-caret{
                border: 4px solid transparent;
                left: 3px;

                &.ascending{
                  border-bottom-color: #C0C4CC;
                  top: -2px;
                }
                &.descending{
                  border-top-color: #C0C4CC;
                  bottom: -2px;
                }
              }
            }
          }
          &.ascending{
            .cell .caret-wrapper .sort-caret.ascending{
              border-bottom-color: var(--theme, #FF6A6C);
            }
          }
          &.descending{
            .cell .caret-wrapper .sort-caret.descending{
              border-top-color: var(--theme, #FF6A6C);
            }
          }
        }
      }
    }
    .el-table__fixed-body-wrapper,
    .el-table__body-wrapper{
      .el-table__body{
        .el-table__row{
          .el-table__cell{
            padding: 6px 0;
            .cell{
              font-size: 14px;
              font-weight: 400;
              color: #606266;
              padding: 0 12px;
              min-width: unset;
              .buttons{
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .el-button{
                color: #1890FF;
                font-size: 14px;
                max-width: 100%;
                [class*=el-icon-]+span{
                  display: unset;
                  margin-left: 6px;
                }
                span{
                  width: 100%;
                  display: inline-block;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  line-height: 20px;
                }
                i+span{
                  display: unset;
                  margin-left: 6px;
                }
              }
              .el-button+.el-button{
                margin-left: 24px;
              }
              .not-text{
                .el-button+.el-button{
                  margin-left: 12px;
                }
              }
            }
          }

        }
      }
      &::-webkit-scrollbar{
        height: 6px;

      }
      &::-webkit-scrollbar-thumb{
        background-color: #DCDFE6;
        border: 0;
        border-radius: 3px;

        &:hover{
          background-color: #DCDFE6;
        }
      }
    }
    .el-checkbox {
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 0;

      .el-checkbox__input {
        height: 16px;

        .el-checkbox__inner {
          height: 16px;
          width: 16px;
          border-radius: 4px;

          &:after {
            height: 7px;
            width: 3px;
            border: 2px solid #FFF;
            left: 5px;
            top: 2px;
            border-left: 0;
            border-top: 0;
          }
          &:before{
            height: 4px;
          }
        }
      }
      .el-checkbox__label {
        font-size: 14px;
        font-weight: 400;
        color: #606266;
        padding-left: 6px;
      }
      &.is-checked {
        border-color: var(--theme, #FF6A6C);
      }
      &.is-disabled{
        opacity: 0.4;
        .el-checkbox__input{
          .el-checkbox__inner{
            background-color: #FFF;
            border-color: #DCDFE6;
          }
          &.is-checked,
          &.is-indeterminate{
            .el-checkbox__inner{
              background-color: var(--theme, #FF6A6C);
              border-color: var(--theme, #FF6A6C);
            }
          }
        }
      }
    }
  }
}
.f-pagination{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 0;
  .pagination-text{
    font-weight: 400;
    color: #606266;
    height: 22px;
    line-height: 22px;
    font-size: 12px !important;
    margin-right: 6px;
  }
  .el-pagination{
    padding: 0 !important;
    display: flex;
    justify-content: flex-end;
    .el-pagination__total{
      font-weight: 400;
      color: #606266;
      height: 22px;
      line-height: 22px;
      font-size: 12px !important;
      margin-right: 6px;
    }
    .el-pagination__sizes{
      margin-right: 6px;
      height: 22px;
      line-height: 20px;
      font-size: 12px !important;
      .el-input{
        width: 80px;
        margin: 0;
        .el-input__inner{
          height: 22px;
          line-height: 20px;
          font-size: 12px !important;
          padding-right: 20px !important;
          font-weight: 400;
          color: #606266;
          border-radius: 4px;
          border: 1px solid #DCDFE6;
          &:hover {
            border-color: #a9a9a9 !important;
          }
        }
        .el-input__suffix{
          transform: scale(1);
          right: 6px;
          .el-select__caret{
            line-height: 20px;
            width: 14px;
            color: #909399;
          }
        }
      }
      .el-select .el-input.is-focus .el-input__inner{
        border-color: #A9A9A9;
      }
    }
    .btn-prev,
    .btn-next{
      margin: 0 6px 0 0 !important;
      width: 22px;
      height: 22px;
      background: none;
      min-width: unset;
      color: #909399 !important;
      border-radius: 4px !important;
      &:disabled{
        color: rgba(144, 147, 153, 0.4) !important;
      }
    }
    .el-pager{
      line-height: 22px;
      .number{
        margin: 0 6px 0 0;
        height: 22px;
        background: none;
        min-width: 22px;
        color: #606266;
        border-radius: 4px;
        line-height: 22px;
        padding: 0 4px;
        font-size: 12px !important;
        &.active{
          background: var(--theme, #FF6A6C) !important;
          color: #FFFFFF;
        }
      }
      .more{
        margin: 0 6px 0 0;
        width: 22px;
        height: 22px;
        background: none;
        min-width: unset !important;
        color: #606266;
        border-radius: 4px;
        line-height: 22px;
        padding: 0;
        font-size: 12px !important;
        &:not(.disabled):hover{
          color: var(--theme, #FF6A6C) !important;
        }
      }
      .el-icon-d-arrow-right:before{
        line-height: 25px;
      }
      .el-icon-d-arrow-left:before{
        line-height: 25px;
      }
    }
    .el-pagination__jump{
      margin: 0;
      height: 22px;
      font-size: 12px !important;
      line-height: 22px;
      display: flex;
      .el-input{
        min-width: 48px;
        margin: 0 6px;
        padding: 0;
        width: auto;
        height: 22px;
        line-height: 22px;

        .el-input__inner{
          height: 22px;
          line-height: 20px;
          font-size: 12px !important;
          font-weight: 400;
          color: #606266;
          border-radius: 4px;
          border: 1px solid #DCDFE6;
          display: inline-block;
          text-align: center;
        }
      }
    }
    &.is-background{
      .btn-prev,
      .btn-next{
        background: #F5F7FA;
        min-width: unset;
        &:disabled{
          color: rgba(144, 147, 153, 0.4) ;
        }
      }
      .el-pager{
        .number{
          background: #F5F7FA;
        }
        .more{
          background: #F5F7FA;
        }
      }
    }
  }
}
.f-data-popper{
  width: 498px !important;
  .el-picker-panel__body{
    min-width: 498px !important;
    .el-date-range-picker__time-header{
      padding: 12px 0;
      border-bottom: 1px solid #EBEEF5;
      font-size: 14px;
      .el-date-range-picker__editors-wrap{
        padding: 0 9px;
        .el-date-range-picker__time-picker-wrap{
          padding: 0 3px;
          .el-date-range-picker__editor{
            .el-input__inner{
              background: #FFFFFF;
              border-radius: 4px;
              border: 1px solid #DCDFE6;
              padding-left: 12px;
              color: #606266;
              font-size: 14px;
              &::placeholder{
                font-weight: 400;
                color: #909399;
                font-size: 14px;
              }
            }
            &.is-disabled{
              opacity: 0.4;
            }
          }
          .el-time-panel{
            color: #606266;
            background: #FFFFFF;
            margin: 6px 0;
            border: 0;
            border-radius: 4px;
            width: 156px;
            box-shadow: 0px 3px 10px 2px rgba(0,0,0,0.05);
            .el-time-panel__content{
              &:before{
                border-top: 1px solid #EBEEF5;
                border-bottom: 1px solid #EBEEF5;
              }
              .el-time-spinner__item{
                color: #606266;
                width: 52px;
                &:not(.disabled):not(.active):hover{
                  opacity: 0.6;
                }
                &.active{
                  color: var(--theme, #FF6A6C) !important;
                  font-weight: normal;
                }
              }
            }
            .el-time-panel__footer{
              border-top: 1px solid #EBEEF5;
              padding: 12px;
              height: auto;
              overflow: hidden;
              .el-time-panel__btn{
                width: 48px;
                height: 24px;
                line-height: 22px;
                background: #FFFFFF;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                color: #606266 !important;
                padding: 0;
                margin: 0 0 0 6px;
                float: right;
                position: relative;
                font-weight: normal;
                &.confirm{
                  line-height: 24px;
                  background: var(--theme, #FF6A6C) !important;
                  border: 0;
                  color: #FFFFFF !important;
                  &:hover{
                    background: var(--theme, #FF6A6C) !important;
                    color: #FFFFFF !important;
                  }
                }
                &:hover{
                  opacity: 0.6;
                }
              }
            }
          }
        }
      }
      .el-icon-arrow-right{
        display: none;
      }
    }
    .el-picker-panel__content{
      padding: 12px;
      .el-date-range-picker__header{
        height: 32px;
        .el-picker-panel__icon-btn{
          margin-top: 10px;
          color: #606266;
        }
        div{
          font-size: 14px;
          font-weight: 400;
          color: #606266;
        }
      }
      .el-date-table{
        .el-date-table__row{
          td.prev-month{
            color: #909399;
          }
          td.disabled div{
            color: #606266;
            background-color: #FFF;
            opacity: 0.4;
          }
          .in-range{
            div{
              background-color: unset;
              &:after{
                content: "";
                width: 100%;
                height: 100%;
                background: var(--theme, #FF6A6C) !important;
                opacity: 0.1;
                position: absolute;
                top: 0;
                left: 0;
              }
            }
            &.start-date{
              div:after{
                border-top-left-radius: 15px;
                border-bottom-left-radius: 15px;
                left: 3px;
                width: calc(100% - 3px);
              }
            }
            &.end-date{
              div:after{
                border-top-right-radius: 15px;
                border-bottom-right-radius: 15px;
                right: 3px;
                width: calc(100% - 3px);
              }
            }
          }
          td{
            height: 32px;
            padding: 0;
            div{
              height: 32px;
              padding: 2px 0;
              span{
                font-weight: 400;
                font-size: 14px;
                width: 28px;
                height: 28px;
                line-height: 28px;
              }
            }
            &:hover{
              div{
                span{
                  color: #606266;
                  background-color: unset;
                  position: relative;
                  left: 14px;
                  &:after{
                    content: "";
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background: var(--theme, #FF6A6C) !important;
                    opacity: 0.1;
                    position: absolute;
                    top: 0;
                    left: 0;
                  }
                }
              }
            }
          }
        }
        tr{
          th{
            font-size: 14px;
            font-weight: 400;
            color: #606266;
            line-height: 32px;
            padding: 0;
          }
        }
      }
    }
  }
  .el-picker-panel__footer{
    border-top: 1px solid #EBEEF5;
    padding: 12px;
    height: auto;
    overflow: hidden;
    .el-button{
      width: 48px;
      height: 24px;
      line-height: 22px;
      background: #FFFFFF;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      color: #606266 !important;
      padding: 0;
      margin: 0 0 0 12px;
      float: right;
      position: relative;
      font-weight: normal;
      &.is-plain{
        line-height: 24px;
        background: var(--theme, #FF6A6C) !important;
        border: 0;
        color: #FFFFFF !important;
        &:hover{
          background: var(--theme, #FF6A6C) !important;
          color: #FFFFFF !important;
        }
      }
      &:hover{
        opacity: 0.6;
      }
    }
  }
}
.f-select-popper{
  border: 0 !important;
  margin-top: 12px !important;
  max-width: 0%;
  .el-scrollbar__bar{
    right: 0;
    .el-scrollbar__thumb{
      background-color: #DCDFE6;
    }
  }
  .el-select-dropdown__wrap{
    max-height: 326px;
    .el-select-dropdown__list{
      .el-select-dropdown__item{
        height: 32px;
        line-height: 32px;
        padding: 0 12px;
        &.hover{
          background-color: unset;
          &:after{
            content: "";
            width: 100%;
            height: 100%;
            background: var(--theme, #FF6A6C) !important;
            opacity: 0.1;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
        &.selected{
          color: var(--theme, #FF6A6C) !important;
          background-color: unset;
          &:after{
            content: "";
            width: 100%;
            height: 100%;
            background: var(--theme, #FF6A6C) !important;
            opacity: 0.1;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
        &.disabled{
          color: rgba(144,147,153,0.4) !important;
        }
      }
    }
  }
}
.c-tip-normal{
  background: rgba(0,0,0,0.7) !important;
  color: #fff !important;
}
.normal{
  .c-no-datas-block {
    color: #fff;
    &:before {
      background-image: url("~@/assets/image/noData-normal.png");
    }
  }
  .c-button {
    background: rgba(255,255,255,0.2);
    color: #fff;
    line-height: 32px;
    border: 0;
    border-radius: 4px;
    &[submit],
    &.submit,
    &.on {
      background: rgba(255,255,255,0.4);
    }
    &:before, &:after{
      display: none;
    }
  }
  .c-input,
  .c-select,
  .c-date-editor {
    background: rgba(255,255,255,0.2) !important;
    position: relative;
    &:not(.readonly):not(.disabled):hover:before{
      border: 1px solid rgba(255,255,255,0.4);
    }
    &:not(.readonly):not(.disabled):focus-within:before, &.active:before{
      border: 1px solid rgba(255,255,255,0.6) !important;
    }
    .el-input__inner,
    .el-range-input {
      color: #fff !important;

      &::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
      }
    }
    .el-input__icon {
      color: #fff !important;
      overflow: hidden;

      &.el-icon-circle-close {

        &:before {
          content: "\eacc";
          font-family: 'iconfont';
          font-weight: normal;
          font-size: 20px;
          color: #fff;
        }
      }
    }
    .c-suffix {
      color: #fff;
      &.split,
      &[split] {
        i {
          &:after {
            background: rgba(255, 255, 255, 0.2);
          }
        }
      }
    }
    .el-input~i,
    .el-select~i {
      color: #fff;
      font-weight: bold;
      &:after {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
  .c-select-dropdown.el-select-dropdown {
    background: rgba(0,0,0,0.8) !important;
    border-radius: 4px !important;
    color: #fff !important;
    border: 0 !important;
    .el-select-dropdown__list {
      padding: 0;
      .el-select-dropdown__item {
        color: #fff !important;
        padding-left: 12px !important;
        &.hover {
          background: none !important;
          color: #fff !important;
        }
        &.selected, &:hover {
          background: rgba(255,255,255,0.2) !important;
          color: #fff !important;
          font-weight: normal !important;
        }
        &.selected:after {
          display: none;
        }
      }
    }
  }
  .c-date-editor.el-date-editor {
    .el-range-separator {
      color: #fff !important;
    }
  }
  .c-date-editor-picker.el-picker-panel,
  .c-date-editor-picker.el-time-panel {
    color: #fff;
    background: rgba(0, 0, 0, 0.80);
    border: 0;
    .el-picker-panel__sidebar{
      border-right: 1px solid rgba(232,243,254,0.2);
      .el-picker-panel__shortcut{
        color: #fff;
        &:hover {
          background: rgba(255,255,255,0.2);
        }
      }
    }
    .el-date-range-picker__time-header, .el-date-picker__time-header{
      border-bottom: 1px solid rgba(232,243,254,0.2);
      .el-date-range-picker__time-picker-wrap, .el-date-picker__editor-wrap{
        .el-input__inner {
          background: rgba(255,255,255,0.2) !important;
          color: #fff !important;
          &::placeholder {
            color: rgba(232,243,254,0.7);
          }
          &:hover{
            border-color: rgba(255,255,255,0.4) !important;
          }
          &:focus-within{
            border-color: rgba(255,255,255,0.6) !important;
          }
        }
      }
    }
    .el-date-range-picker__header, .el-date-picker__header{
      .el-picker-panel__icon-btn{
        color: #fff !important;
      }
    }
    .el-date-picker__header{
      .el-date-picker__header-label{
        color: #fff !important;
      }
    }
    .el-picker-panel__content{
      &.is-left{
        border-right: 1px solid rgba(232,243,254,0.2);
      }
      .el-date-table th{
        color: #fff;
        border-bottom: 1px solid rgba(232,243,254,0.2);
      }
      .el-date-table td{
        color: #fff !important;
        &.available:hover{
          div{
            span{
              background: rgba(255,255,255,0.4);
            }
          }
        }
        &.prev-month, &.next-month, &.disabled{
          color: rgba(255,255,255,0.4) !important;
          div{
            background: none;
          }
          span{
            color: rgba(255,255,255,0.4) !important;
          }
        }
        &.today{
          span{
            color: #fff !important;
            font-weight: bold;
          }
        }
        &.in-range{
          div{
            background: rgba(255,255,255,0.4);
          }
          &.start-date{
            div{
              span{
                background: rgba(255,255,255,0.4) !important;
                color: #fff !important;
              }
            }
          }
          &.end-date{
            div{
              span{
                background: rgba(255,255,255,0.4) !important;
                color: #fff !important;
              }
            }
          }
        }
        &.current {
          div{
            span {
              background: rgba(255,255,255,0.4) !important;
              color: #fff !important;
            }
          }
        }
      }
      .el-year-table, .el-month-table{
        td{
          .cell{
            color: #fff !important;
          }
          &.today{
            .cell{
              color: #fff !important;
              font-weight: bold;
            }
          }
          &:not(.disabled):hover{
            .cell{
              background: rgba(255,255,255,0.4);
            }
          }
          &.disabled{
            .cell{
              color: rgba(232,243,254,0.4) !important;
              background: none !important;
            }
          }
          &.current{
            .cell{
              background: rgba(255,255,255,0.4) !important;
              color: #fff !important;
            }
          }
        }
      }
    }
    .el-time-panel{
      color: #fff;
      background: rgba(0, 0, 0, 0.80);
    }
    .el-time-range-picker__body{
      border: 1px solid rgba(232,243,254,0.2);
    }
    .el-time-panel__content{
      &:before{
        border-top: 1px solid rgba(232,243,254,0.2);
        border-bottom: 1px solid rgba(232,243,254,0.2);
      }
      .el-time-spinner__item{
        color: #fff;
        &:not(.disabled):not(.active):hover{
          background: rgba(255,255,255,0.4)
        }
        &.active{
          color: #fff;
          font-weight: bold;
        }
      }
    }
    .el-picker-panel__footer, .el-time-panel__footer{
      border-top: 1px solid rgba(232,243,254,0.2);
      .el-button, .el-time-panel__btn{
        background: rgba(255,255,255,0.2);
        color: #fff !important;
        &.is-plain, &.confirm{
          background: rgba(255,255,255,0.4);
        }
      }
    }

    .el-scrollbar__bar {
      .el-scrollbar__thumb{
        background-color: rgba(255,255,255,0.4);
        &:hover {
          background-color: rgba(255,255,255,0.55);
        }
      }
    }
  }
}
/* 确认窗 取消确认按钮位置更换 */

.el-message-box__wrapper:not(.ct-tech-ui) {
  .el-message-box__btns {
    display: flex;
    flex-flow: row-reverse;
    padding: 5px 12px 0;
  }
  .el-message-box__btns .el-button {
    margin-left: 12px;
  }
  .el-message-box__status.el-icon-warning{
    color: #FFA940;
  }
  .el-message-box {
    width: 450px;
    padding-bottom: 12px;
  }
  .el-message-box__content {
    padding: 27px 12px;
  }
}
/* 新规范选中颜色更改 */
.el-select.el-select--small .el-input.is-focus .el-input__inner,
.el-select.el-select--small .el-input.is-active .el-input__inner,
.el-select.el-select--small .el-input__inner:focus,
.el-cascader .el-input.el-input--small.is-focus .el-input__inner,
.el-cascader .el-input.el-input--small .el-input__inner:focus,
.el-select.el-select--medium .el-input.is-focus .el-input__inner,
.el-select.el-select--medium .el-input .el-input__inner:focus
.el-input.el-input--small.is-active .el-input__inner,
.el-input.el-input--small .el-input__inner:focus{
  border-color: #A9A9A9;
}

/*测距测面按设计覆盖默认样式*/
.ctmap-ol-measure-tooltip{
  color: #fff;
  padding: 6px 12px;
  font-size: 12px;
  .__text{
    line-height: 16px;
    padding: 0;
    margin: 0;
  }
  .__actions{
    margin-left: 6px;
    svg{
      height: 12px;
      width: 12px;
      line-height: 16px;
      padding: 0;
    }
  }
}
// 提示框内边距
.tooltip-padding {
  padding: 8px !important;
}
.f-button.el-button{
  height: 32px;
  border-radius: 4px;
  padding: 8px 12px;
  min-width: 60px;
  background: #FFF;
  border: 1px solid #DCDFE6;
  color: #606266;
  font-size: 14px;
  &:hover{
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    opacity: 0.6;
  }
  &:active{
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    opacity: 0.8;
  }
  &:focus{
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
  }
  &.phantom{
    background: #FFFFFF;
    border: 1px solid var(--theme, #FF6A6C);
    color: var(--theme, #FF6A6C);
    &:hover{
      background: #FFFFFF;
      border: 1px solid var(--theme, #FF6A6C);
      color: var(--theme, #FF6A6C);
      opacity: 0.6;
    }
    &:active{
      background: #FFFFFF;
      border: 1px solid var(--theme, #FF6A6C);
      color: var(--theme, #FF6A6C);
      opacity: 0.8;
    }
  }
  span{
    line-height: 14px;
    height: 14px;
    display: inline-block;
    font-size: 14px;
  }
  &.el-button--primary{
    color: #FFF;
    background-color: var(--theme, #FF6A6C);
    border-color: var(--theme, #FF6A6C);
    &:hover{
      color: #FFF;
      background-color: var(--theme, #FF6A6C);
      border-color: var(--theme, #FF6A6C);
      opacity: 0.6;
    }
    &:active{
      color: #FFF;
      background-color: var(--theme, #FF6A6C);
      border-color: var(--theme, #FF6A6C);
      opacity: 0.8;
    }
  }
  &.el-button--primary.new-primary{
    color: var(--theme, #FF6A6C);
    background-color: #FFFFFF;
    border-color: var(--theme, #FF6A6C);
    &:hover{
      color:var(--theme, #FF6A6C);
      background-color: #FFFFFF;
      border-color: var(--theme, #FF6A6C);
      opacity: 0.6;
    }
    &:active{
      color:var(--theme, #FF6A6C);
      background-color: #FFFFFF;
      border-color: var(--theme, #FF6A6C);
      opacity: 0.8;
    }
  }
  &.iconfont{
    span{
      margin-left: 6px;
    }
  }
}
.f-button.el-button + .f-button.el-button{
  margin-left: 12px;
}
// 标准ui样式库
.base-ui {
  .btn-row, .btn-row-left, .btn-row-right {
    display: flex;
    align-items: center;
    justify-content: center;
    .el-button {
      margin-left: 12px !important;
      min-width: 60px;
      height: 32px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;
      &:hover {
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        opacity: 0.6;
      }
      &:active {
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        opacity: 0.8;
      }
      &.phantom {
        background: #ffffff;
        border: 1px solid var(--theme, #ff6a6c);
        color: var(--theme, #ff6a6c);
        &:hover {
          background: #ffffff;
          border: 1px solid var(--theme, #ff6a6c);
          color: var(--theme, #ff6a6c);
          opacity: 0.6;
        }
        &:active {
          background: #ffffff;
          border: 1px solid var(--theme, #ff6a6c);
          color: var(--theme, #ff6a6c);
          opacity: 0.8;
        }
      }
      span {
        line-height: 1;
        font-size: 14px;
      }
      &.el-button--primary {
        color: #fff;
        background-color: var(--theme, #ff6a6c);
        border-color: var(--theme, #ff6a6c);
        &:hover {
          color: #fff;
          background-color: var(--theme, #ff6a6c);
          border-color: var(--theme, #ff6a6c);
          opacity: 0.6;
        }
        &:active {
          color: #fff;
          background-color: var(--theme, #ff6a6c);
          border-color: var(--theme, #ff6a6c);
          opacity: 0.8;
        }
      }
      &.el-button--primary.new-primary {
        color: var(--theme, #ff6a6c);
        background-color: #ffffff;
        border-color: var(--theme, #ff6a6c);
        &:hover {
          color: var(--theme, #ff6a6c);
          background-color: #ffffff;
          border-color: var(--theme, #ff6a6c);
          opacity: 0.6;
        }
        &:active {
          color: var(--theme, #ff6a6c);
          background-color: #ffffff;
          border-color: var(--theme, #ff6a6c);
          opacity: 0.8;
        }
      }
      &.iconfont {
        span {
          margin-left: 6px;
        }
      }
    }
    .el-button:first-child {
      margin-left: 0 !important;
    }
  }
  .btn-row-left {
    justify-content: flex-start;
  }
  .btn-row-right {
    justify-content: flex-end;
  }
}
.f-tree {
  .el-tree-node.is-current > .el-tree-node__content {
    color: var(--theme, #ff6a6c);
    background-color: rgba(0, 0, 0, 0)!important;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: var(--theme, #ff6a6c);
      opacity: 0.1;
      z-index: -1;
    }
  }
  .el-tree-node:focus>.el-tree-node__content{
    background-color: rgba(0, 0, 0, 0);
  }
  .el-tree-node__content {
    border-radius: 4px;
    position: relative;
    line-height: 13px;
    height: 32px;
    z-index: 2;
    &:hover {
      background-color: rgba(0, 0, 0, 0);
      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: var(--theme, #ff6a6c);
        opacity: 0.1;
        z-index: -1;
      }
    }
  }
}

.f-cascader{
  .el-cascader-node:not(.is-disabled):focus,
  .el-cascader-node:not(.is-disabled):hover{
    background-color: unset;
    z-index: 2;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: var(--theme, #ff6a6c);
      opacity: 0.1;
      z-index: -1;
    }
  }
}

.el-input.el-input--small{
  font-size: 14px;
}

/*--------------------铁塔组件库主题色配置start--------------------*/
.ct-theme-color {
  //按钮
  .ct-tech-ui.el-button--primary {
    color: #fff;
    background-color: var(--theme, #ff6a6c);
    border-color: var(--theme, #ff6a6c);

    &:hover {
      color: #fff;
      background-color: var(--theme, #ff6a6c);
      border-color: var(--theme, #ff6a6c);
      opacity: 0.6;
    }

    &:active {
      color: #fff;
      background-color: var(--theme, #ff6a6c);
      border-color: var(--theme, #ff6a6c);
      opacity: 0.8;
    }
  }

  //单选框
  .ct-tech-ui.el-radio.ct-radio
  .el-radio__input.is-checked
  .el-radio__inner, .ct-tech-ui.el-radio.ct-radio .el-radio__input.is-disabled.is-checked .el-radio__inner {
    background-color: var(--theme, #ff6a6c);
    border-color: var(--theme, #ff6a6c);
  }

  //复选框
  .ct-tech-ui.ct-checkbox-box {
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: var(--theme, #ff6a6c);
      border-color: var(--theme, #ff6a6c);
    }

    .el-checkbox__inner:hover {
      border-color: var(--theme, #ff6a6c);
    }

    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: var(--theme, #ff6a6c);
    }

    .el-checkbox__label {
      color: #606266 !important;
    }
  }

  //关闭按钮
  .ct-tech-ui .el-dialog__headerbtn:focus .el-dialog__close,
  .ct-tech-ui .el-dialog__headerbtn:hover .el-dialog__close {
    color: var(--theme, #ff6a6c);
  }
}
// 时间选择器
.ct-date-popper.ct-tech-ui .el-date-table {
  td.end-date span,
  td.start-date span {
    background-color: var(--theme, #ff6a6c);
  }

  td.available:hover {
    color: var(--theme, #ff6a6c);
  }
}

.ct-date-popper.ct-tech-ui.el-picker-panel.el-date-picker
.el-picker-panel__body
.el-picker-panel__content
.el-date-table
td.today
span,
.ct-date-popper.ct-tech-ui.el-picker-panel.el-date-range-picker
.el-picker-panel__body
.el-picker-panel__content
.el-date-table
td.today
span {
  color: var(--theme, #ff6a6c);
}

.ct-date-popper.ct-tech-ui.el-picker-panel.el-date-picker
.el-picker-panel__body
.el-picker-panel__content
.el-date-table
td:not(.disabled)
span:hover,
.ct-date-popper.ct-tech-ui.el-picker-panel.el-date-range-picker
.el-picker-panel__body
.el-picker-panel__content
.el-date-table
td:not(.disabled)
span:hover {
  color: var(--theme, #ff6a6c);
  background: unset;
  z-index: 2;

  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--theme, #ff6a6c);
    opacity: 0.1;
    border-radius: 50%;
    z-index: -1;
  }
}

.ct-date-popper.ct-tech-ui.el-picker-panel.el-date-picker
.el-picker-panel__body
.el-picker-panel__content
.el-date-table
td.in-range
div,
.ct-date-popper.ct-tech-ui.el-picker-panel.el-date-range-picker
.el-picker-panel__body
.el-picker-panel__content
.el-date-table
td.in-range
div {
  background: unset;
  z-index: 2;

  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--theme, #ff6a6c);
    opacity: 0.1;
    z-index: -1;
  }
}

.ct-date-popper.ct-tech-ui.el-picker-panel.el-date-picker
.el-picker-panel__body
.el-picker-panel__content
.el-date-table
td.end-date
span,
.ct-date-popper.ct-tech-ui.el-picker-panel.el-date-range-picker
.el-picker-panel__body
.el-picker-panel__content
.el-date-table
td.end-date
span {
  color: #ffffff;
}

// 分页中的下拉框
.ct-page-select.ct-tech-ui.el-select-dropdown{
  max-width: none;
}
/*--------------------铁塔组件库主题色配置end--------------------*/
.f-checkbox {
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;

  .el-checkbox__input {
    height: 16px;

    .el-checkbox__inner {
      height: 16px;
      width: 16px;
      border-radius: 4px;

      &:after {
        height: 7px;
        width: 3px;
        border: 2px solid #FFF;
        left: 5px;
        top: 2px;
        border-left: 0;
        border-top: 0;
      }
      &:before{
        height: 4px;
      }
    }
  }
  .el-checkbox__label {
    font-size: 14px;
    font-weight: 400;
    color: #606266;
    padding-left: 6px;
  }
  &.is-checked {
    border-color: var(--theme, #FF6A6C);
  }
  &.is-disabled{
    opacity: 0.4;
    .el-checkbox__input{
      .el-checkbox__inner{
        background-color: #FFF;
        border-color: #DCDFE6;
      }
      &.is-checked,
      &.is-indeterminate{
        .el-checkbox__inner{
          background-color: var(--theme, #FF6A6C);
          border-color: var(--theme, #FF6A6C);
        }
      }
    }
  }
}
.f-ct-container{
  padding: 24px;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.f-ct-search .ct-tech-ui{
  .el-form-item__content{
    padding: 0;
  }
  .ct-tech-ui.ct-select {
    width: 100%;
    .el-select {
      width: 100% !important;
    }
  }
  input {
    font-family: Microsoft YaHei, PingFangSC, Source Han Sans SC;
  }
}
.f-search-buttons{
  margin-bottom: 12px;
  .el-col {
    display: flex;
    float: left;

    .el-button {
      margin: 0 12px 0 0 !important;
      .iconfont+span{
        margin-left: 6px;
      }
    }

    &.right {
      justify-content: end;
      float: right;

      .el-button {
        margin: 0 0 0 12px !important;
      }
    }
  }
}
.f-ct-pagination{
  padding: 12px 0 0 !important;
  display: flex;
  justify-content: flex-end;
}
.f-ct-dialog{
  .el-dialog{
    .el-dialog__body{
      padding: 12px;
      .el-form-item__content{
        padding: 0;
      }
      .ct-tech-ui.ct-select {
        width: 100%;
        .el-select {
          width: 100% !important;
        }
      }
    }
  }
}

.correct-tooltip {
  background: #0F1926 !important;
  color: #E8F3FE !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 6px 12px !important;

  .popper__arrow,
  .popper__arrow:after {
    display: unset !important;
  }

  &.el-tooltip__popper[x-placement^="top"] {
    margin-bottom: 5px !important;

    .popper__arrow,
    .popper__arrow:after {
      border-top-color: #0F1926 !important;
    }
  }
}
